// import React, { useEffect, useState } from 'react';
import React from 'react';
// import { timer } from 'rxjs';
import { SBox } from '../../common/s-components/layout/s-box';
import { SRow } from '../../common/s-components/layout/s-row';
import { SCol } from '../../common/s-components/layout/s-col';
import { AnimatedGradient } from '../../common/components/animated-gradient';

export const Skeleton2: React.FC = () => {
  // const [loaded, setLoaded] = useState(false);
  //
  // useEffect(() => {
  //   const timer$ = timer(500).subscribe(() => {
  //     setLoaded(true);
  //   });
  //   return () => timer$.unsubscribe();
  // }, []);
  //
  // if (!loaded) {
  //   return null;
  // }

  return (
    <SBox position="relative" px={16} pt={7} mb={32} height={300}>
      <SBox width={192} height={16} mb={20} bg="eastBay" />
      <SRow mb={16}>
        <SBox bg="eastBay" width={80} height={80} borderRadius={10} mr={16} />
        <SCol>
          <SBox width={128} height={16} mt={17} mb={12} bg="eastBay" />
          <SBox width={192} height={16} bg="eastBay" />
        </SCol>
      </SRow>
      <SRow mb={16}>
        <SBox bg="eastBay" width={80} height={80} borderRadius={10} mr={16} />
        <SCol>
          <SBox width={128} height={16} mt={17} mb={12} bg="eastBay" />
          <SBox width={192} height={16} bg="eastBay" />
        </SCol>
      </SRow>
      <SRow>
        <SBox bg="eastBay" width={80} height={80} borderRadius={10} mr={16} />
        <SCol>
          <SBox width={128} height={16} mt={17} mb={12} bg="eastBay" />
          <SBox width={192} height={16} bg="eastBay" />
        </SCol>
      </SRow>
      <SBox position="absolute" top={0} left={-80} height="100%" flex={1}>
        <AnimatedGradient angle={6.33} gradientWidth={220} />
      </SBox>
    </SBox>
  );
};