import React from 'react';
import { SBox } from '../../../common/s-components/layout/s-box';
import { SRow } from '../../../common/s-components/layout/s-row';
import { SCol } from '../../../common/s-components/layout/s-col';
import { AnimatedGradient } from '../../../common/components/animated-gradient';
import {
  TRACK_CARD_HEIGHT,
  TRACK_CARD_MARGIN,
} from '../../../common/constants';
import { theme } from '../../../app/theme';

export const Skeleton: React.FC = () => {
  const imgSideLength = TRACK_CARD_HEIGHT;
  const cardMargin = TRACK_CARD_MARGIN;
  const bgColor = theme.colors.eastBay;

  return (
    <SBox px={16} position="relative" overflow="hidden">
      <SRow mb={cardMargin}>
        <SBox
          bg={bgColor}
          width={imgSideLength}
          height={imgSideLength}
          borderRadius={10}
          mr={16}
        />
        <SCol>
          <SBox width={128} height={16} mt={18} mb={12} bg={bgColor} />
          <SBox width={192} height={16} bg={bgColor} />
        </SCol>
      </SRow>
      <SRow mb={cardMargin}>
        <SBox
          bg={bgColor}
          width={imgSideLength}
          height={imgSideLength}
          borderRadius={10}
          mr={16}
        />
        <SCol>
          <SBox width={128} height={16} mt={18} mb={12} bg={bgColor} />
          <SBox width={192} height={16} bg={bgColor} />
        </SCol>
      </SRow>
      <SRow mb={cardMargin}>
        <SBox
          bg={bgColor}
          width={imgSideLength}
          height={imgSideLength}
          borderRadius={10}
          mr={16}
        />
        <SCol>
          <SBox width={128} height={16} mt={18} mb={12} bg={bgColor} />
          <SBox width={192} height={16} bg={bgColor} />
        </SCol>
      </SRow>
      <SBox position="absolute" top={0} left={0} height="100%" flex={1}>
        <AnimatedGradient angle={8} gradientWidth={160} />
      </SBox>
    </SBox>
  );
};