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';

export type TProps = {
  lightVariant?: boolean;
};

export const Skeleton: React.FC<TProps> = props => {
  const { lightVariant } = props;
  const bgColor = lightVariant ? 'athensGray3' : 'eastBay';
  const primaryColor = lightVariant
    ? theme.colorsRgba.gradientPrimaryLight
    : undefined;
  const secondaryColor = lightVariant
    ? theme.colorsRgba.gradientSecondaryLight
    : undefined;
  return (
    <SBox position="relative" px={16} height={124} mt={-2}>
      <SBox width={64} height={16} bg={bgColor} mb={40} />
      <SBox width={128} height={16} bg={bgColor} mb={36} />
      <SBox width={64} height={16} bg={bgColor} />
      <SBox position="absolute" top={0} left={-80} height="100%" flex={1}>
        <AnimatedGradient
          primaryColor={primaryColor}
          secondaryColor={secondaryColor}
          angle={6.33}
          gradientWidth={210}
        />
      </SBox>
    </SBox>
  );
};

Skeleton.defaultProps = {
  lightVariant: false,
};