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

type TProps = {
  width?: number;
  height?: number;
  bg?: string;
} & TCssRules;

export const SkeletonsSmall: React.FC<TProps> = props => {
  const { bg, width, height, ...css } = props;
  return (
    <SBox
      position="relative"
      height={height}
      overflow="hidden"
      width={width}
      bg={bg}
      {...css}
    >
      <SBox position="absolute" top={0} left={0} height="100%" flex={1}>
        <AnimatedGradient angle={-1} gradientWidth={160} />
      </SBox>
    </SBox>
  );
};

SkeletonsSmall.defaultProps = {
  bg: 'eastBay',
  width: 64,
  height: 16,
};