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

type TProps = {};

export const Skeleton1: React.FC<TProps> = () => {
  const width = getWinWidth();

  return (
    <SBox position="relative" ml={16} pt={2} overflow="hidden">
      <SBox width={192} height={16} mb={32} bg="eastBay" />
      <SRow mb={28}>
        <SBox width={108} height={32} borderRadius={16} bg="eastBay" />
      </SRow>
      <SBox width={width} height={298} borderRadius={8} bg="eastBay" mr={16} />
      <SBox position="absolute" top={0} left={0} height="100%" flex={1}>
        <AnimatedGradient angle={8} gradientWidth={160} />
      </SBox>
    </SBox>
  );
};