import React from 'react';
import { SBox } from '../../s-components/layout/s-box';
import { AnimatedGradient } from '../animated-gradient';
import { theme } from '../../../app/theme';
import { SInfoMarketSkeletonContainer } from '../../s-components/s-info-market-skeleton-container';

export const InfoMarketSkeleton: React.FC = () => {
  return (
    <SInfoMarketSkeletonContainer>
      <SBox width={1} height={96} bg="athensGray4" borderRadius={8} />
      <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>
    </SInfoMarketSkeletonContainer>
  );
};