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

type TProps = {};

export const PillSkeleton: React.FC<TProps> = () => {
  return (
    <SBox
      position="relative"
      pt={0}
      alignItems="center"
      overflow="hidden"
      borderRadius={16}
      mx={16}
    >
      <SBox width={110} height={32} borderRadius={16} mt={0} bg="eastBay" />
      <SBox position="absolute" top={0} left={0} height="100%" flex={1}>
        <AnimatedGradient angle={-1} gradientWidth={160} />
      </SBox>
    </SBox>
  );
};