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';
import { theme } from '../../../app/theme';
import { SCarouselDot } from '../../../common/s-components/s-carousel-dot';

type TProps = {};

export const Skeleton2: React.FC<TProps> = () => {
  return (
    <SBox position="relative" mt={-6} alignItems="center" mb={20}>
      <SBox width={192} height={16} mb={28} mx={16} bg="eastBay" />
      <SBox
        width={110}
        height={32}
        mb={24}
        mx={16}
        borderRadius={20}
        bg="eastBay"
      />
      <SBox
        width={90}
        height={24}
        mb={64}
        mx={0}
        bg="eastBay"
        borderRadius={2}
      />
      <SRow>
        <SCarouselDot bg={theme.colors.eastBay} />
        <SCarouselDot bg={theme.colors.eastBay} />
      </SRow>
      <SBox position="absolute" top={0} left={0} height="100%" flex={1}>
        <AnimatedGradient angle={8} gradientWidth={160} />
      </SBox>
    </SBox>
  );
};