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

type TProps = {};

export const Skeleton: React.FC<TProps> = () => {
  return (
    <SBox position="relative" height={368} ml={16} pt={6} overflow="hidden">
      <SBox width={192} height={16} mb={20} bg="eastBay" />
      <SBox flex={1} flexDirection="row" height={232} overflow="hidden">
        <SBox
          width={283}
          height={250}
          mb={60}
          borderRadius={10}
          bg="eastBay"
          mr={16}
        />
        <SBox width={283} height={250} mb={60} borderRadius={10} bg="eastBay" />
      </SBox>
      <SBox position="absolute" top={0} left={0} height="100%" flex={1}>
        <AnimatedGradient angle={8} gradientWidth={160} />
      </SBox>
    </SBox>
  );
};