import React from 'react';
import { Dimensions } from 'react-native';
import { SBox } from '../../common/s-components/layout/s-box';
import { AnimatedGradient } from '../../common/components/animated-gradient';
import {
  SKELETON_HEIGHT,
  CARD_HEIGHT,
  CARD_BOTTOM_MARGIN,
  CARD_SIDE_MARGIN,
  SKELETON_TOP_MARGIN,
} from '../constants';

const { width } = Dimensions.get('window');

type TProps = {};

export const Skeleton: React.FC<TProps> = () => {
  const cardWidth = width - CARD_SIDE_MARGIN * 2;
  return (
    <SBox
      position="relative"
      height={SKELETON_HEIGHT}
      mx={CARD_SIDE_MARGIN}
      mt={SKELETON_TOP_MARGIN}
      overflow="hidden"
    >
      <SBox
        bg="eastBay"
        width={cardWidth}
        height={CARD_HEIGHT}
        borderRadius={8}
        mb={CARD_BOTTOM_MARGIN}
      />
      <SBox
        bg="eastBay"
        width={cardWidth}
        height={CARD_HEIGHT}
        borderRadius={8}
        mb={CARD_BOTTOM_MARGIN}
      />
      <SBox
        bg="eastBay"
        width={cardWidth}
        height={CARD_HEIGHT}
        borderRadius={8}
      />
      <SBox
        position="absolute"
        top={-16}
        left={0}
        height={SKELETON_HEIGHT + 32}
        flex={1}
      >
        <AnimatedGradient angle={8} gradientWidth={160} />
      </SBox>
    </SBox>
  );
};