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_WIDTH,
  TRACK_CARD_MARGIN,
} from '../../common/constants';

type TProps = {};

export const Skeleton: React.FC<TProps> = () => {
  return (
    <SBox px={16} position="relative" mt={15}>
      <SRow mb={TRACK_CARD_MARGIN}>
        <SBox
          bg="eastBay"
          width={TRACK_CARD_WIDTH}
          height={TRACK_CARD_HEIGHT}
          borderRadius={10}
          mr={16}
        />
        <SCol>
          <SBox width={128} height={16} mt={17} mb={13} bg="eastBay" />
          <SBox width={192} height={16} bg="eastBay" />
        </SCol>
      </SRow>
      <SBox position="absolute" top={0} left={0} height="100%" flex={1}>
        <AnimatedGradient angle={8} gradientWidth={160} />
      </SBox>
    </SBox>
  );
};