import React from 'react';
import { SBox } from '../../../common/s-components/layout/s-box';
import { AnimatedGradient } from '../../../common/components/animated-gradient';

type TProps = {
  short?: boolean;
};

export const SkeletonStatistics: React.FC<TProps> = props => {
  const { short } = props;
  return (
    <SBox
      position="relative"
      mt={15}
      height={16}
      width={short ? 32 : 64}
      alignItems="center"
      overflow="hidden"
      bg="eastBay"
    >
      <SBox position="absolute" top={0} left={0} height="100%" flex={1}>
        <AnimatedGradient angle={8} gradientWidth={160} />
      </SBox>
    </SBox>
  );
};

SkeletonStatistics.defaultProps = {
  short: false,
};