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

type TProps = {
  isPlaylistVariant: boolean;
};

export const Skeleton: React.FC<TProps> = props => {
  const { isPlaylistVariant } = props;
  return (
    <SBox position="relative" px={16} pt={2} overflow="hidden" pb={48}>
      {!isPlaylistVariant && (
        <SBox width={192} height={16} mb={36} bg={theme.colors.eastBay} />
      )}
      <SBox
        width={1}
        height={44}
        mb={24}
        borderRadius={23}
        bg={theme.colors.eastBay}
      />
      <SRow justifyContent="space-between">
        <SBox width={64} height={16} mb={24} bg={theme.colors.eastBay} />
        <SBox width={128} height={16} mb={24} bg={theme.colors.eastBay} />
      </SRow>
      <SBox
        width={1}
        height={120}
        mb={16}
        bg={theme.colors.eastBay}
        borderRadius={8}
      />
      <SBox
        width={1}
        height={120}
        mb={16}
        bg={theme.colors.eastBay}
        borderRadius={8}
      />
      <SBox
        width={1}
        height={120}
        mb={16}
        bg={theme.colors.eastBay}
        borderRadius={8}
      />
      <SBox position="absolute" top={0} left={0} height="100%" flex={1}>
        <AnimatedGradient angle={8} gradientWidth={160} />
      </SBox>
    </SBox>
  );
};