// import React, { useState, useEffect } from 'react';
import React from 'react';
import { SBox } from '../../common/s-components/layout/s-box';
import { AnimatedGradient } from '../../common/components/animated-gradient';
import { SSkeletonCard } from '../s-components/s-skeleton-card';

export const Skeleton: React.FC = () => {
  return (
    <SBox height={100} position="relative" overflow="hidden">
      <SBox flex={1} flexDirection="row">
        <SSkeletonCard />
        <SSkeletonCard />
        <SSkeletonCard />
      </SBox>
      <SBox position="absolute" top={0} left={0} height="100%" flex={1}>
        <AnimatedGradient angle={8} gradientWidth={160} />
      </SBox>
    </SBox>
  );
};