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

export const Skeleton: React.FC = () => {
  return (
    <SBox px={16} position="relative" pt={16}>
      <SBox width={343} height={120} mb={16} bg="eastBay" borderRadius={8} />
      <SBox width={343} height={120} mb={16} bg="eastBay" borderRadius={8} />
      <SBox width={343} height={120} bg="eastBay" borderRadius={8} />
      <SBox position="absolute" top={0} left={0} height="100%" flex={1}>
        <AnimatedGradient angle={8} gradientWidth={160} />
      </SBox>
    </SBox>
  );
};

Skeleton.propTypes = {};

Skeleton.defaultProps = {};