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

type TProps = {};

export const Skeleton: React.FC<TProps> = () => {
  return (
    <SRow>
      <SBox
        width={152}
        height={44}
        bg="eastBay"
        borderRadius={26}
        ml={16}
        mr={12}
      />
      <SBox width={170} height={44} bg="eastBay" borderRadius={26} mr={12} />
      <SBox width={170} height={44} bg="eastBay" borderRadius={26} />
      <SBox position="absolute" top={0} left={0} height="100%" flex={1}>
        <AnimatedGradient angle={8} gradientWidth={160} />
      </SBox>
    </SRow>
  );
};