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

type TProps = {};

export const SkeletonStringLight: React.FC<TProps> = () => {
  return (
    <SBox
      position="relative"
      height={16}
      overflow="hidden"
      width={48}
      bg={theme.colorsRgba.skeletonLight}
    >
      <SBox position="absolute" top={0} left={0} height="100%" flex={1}>
        <AnimatedGradient
          angle={-1}
          gradientWidth={160}
          primaryColor={theme.colorsRgba.skeletonLightPrimaryColor}
          secondaryColor={theme.colorsRgba.skeletonLightSecondaryColor}
        />
      </SBox>
    </SBox>
  );
};