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

type TProps = {
  variant: string;
};

export const Skeleton: React.FC<TProps> = props => {
  const { variant } = props;
  const height = variant === 'nmf' ? 64 : 88;

  return (
    <SBox>
      <SkeletonsSmall width={64} mb={36} mt={4} />
      <SRow mb={16}>
        <SBox
          borderRadius={8}
          bg="eastBay"
          flexBasis={0}
          flexGrow={0.5}
          height={height}
          mr={18}
        />
        <SBox
          borderRadius={8}
          bg="eastBay"
          flexBasis={0}
          flexGrow={0.5}
          height={height}
        />
      </SRow>
      <SRow>
        <SBox
          borderRadius={8}
          bg="eastBay"
          flexBasis={0}
          flexGrow={0.5}
          height={height}
          mr={18}
        />
        <SBox
          borderRadius={8}
          bg="eastBay"
          flexBasis={0}
          flexGrow={0.5}
          height={height}
        />
      </SRow>
      <SBox position="absolute" top={0} left={0} height="100%" flex={1}>
        <AnimatedGradient angle={8} gradientWidth={160} />
      </SBox>
    </SBox>
  );
};