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

type TProps = {};

export const Skeleton: React.FC<TProps> = () => {
  return (
    <SBox position="relative" mx={16} pt={3} overflow="hidden">
      <SBox width={128} height={16} mb={24} bg="eastBay" />
      <SBox
        width={1}
        height={TOP_PLAYLIST_CARD_HEIGHT}
        mb={32}
        bg="eastBay"
        borderRadius={8}
      />
      <SBox alignItems="center">
        <SRow justifyContent="center">
          <SCarouselDot />
          <SCarouselDot />
          <SCarouselDot />
          <SCarouselDot />
          <SCarouselDot />
        </SRow>
      </SBox>
      <SBox position="absolute" top={-16} left={0} height={292} flex={1}>
        <AnimatedGradient angle={8} gradientWidth={160} />
      </SBox>
    </SBox>
  );
};