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 { SInfoPlaylistsSkeletonContainer } from '../s-components/s-info-playlists-skeleton-container';

type TProps = {};

export const InfoPlaylistsSkeleton: React.FC<TProps> = () => {
  return (
    <SInfoPlaylistsSkeletonContainer>
      <SBox width={64} height={16} bg="athensGray4" mb={32} />
      <SBox width={128} height={16} bg="athensGray4" mb={32} />
      <SBox width={64} height={16} bg="athensGray4" />
      <SBox position="absolute" top={0} left={-80} height="100%" flex={1}>
        <AnimatedGradient
          primaryColor={theme.colorsRgba.gradientPrimaryLight2}
          secondaryColor={theme.colorsRgba.gradientSecondaryLight2}
          angle={12}
          gradientWidth={210}
        />
      </SBox>
    </SInfoPlaylistsSkeletonContainer>
  );
};