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" mb={68} mx={16} height={408}>
      <SBox width={192} height={16} mt={5} mb={64} bg="eastBay" />
      <SBox flexDirection="row" justifyContent="flex-start" mb={60}>
        <SBox width={48} height={16} mr={44} bg="eastBay" />
        <SBox width={48} height={16} mr={44} bg="eastBay" />
        <SBox width={48} height={16} mr={44} bg="eastBay" />
        <SBox width={48} height={16} bg="eastBay" />
      </SBox>
      <SBox width={1} alignItems="center" mb={40}>
        <SBox width={172} height={172} borderRadius={86} bg="eastBay" />
      </SBox>
      <SBox width={192} height={16} mb={8} mx={48} bg="eastBay" />
      <SBox width={128} height={16} bg="eastBay" mx={48} />
      <SBox position="absolute" top={0} left={0} height="100%" flex={1}>
        <AnimatedGradient angle={8} gradientWidth={160} />
      </SBox>
    </SBox>
  );
};