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 { SRow } from '../../../common/s-components/layout/s-row';
import { TVendor } from '../../../common/types';

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

type TProps = {
  vendor: TVendor;
};

export const Skeleton: React.FC<TProps> = props => {
  const { vendor } = props;
  const isSpotify = vendor === 'spotify';
  const appleSlideWidth = Math.floor((DEVICE_WIDTH - 16) / 2 - 16);
  const slideWidth = isSpotify ? 134 : appleSlideWidth;
  return (
    <SBox position="relative" pl={16} pb={36} pt={2} bg="ebonyClay">
      <SBox width={192} height={16} bg="eastBay" mb={24} />
      <SRow>
        <SBox
          width={slideWidth}
          height={80}
          bg="eastBay"
          mr={16}
          borderRadius={8}
        />
        <SBox
          width={slideWidth}
          height={80}
          bg="eastBay"
          mr={16}
          borderRadius={8}
        />
        {isSpotify ? (
          <SBox
            width={slideWidth}
            height={80}
            bg="eastBay"
            mr={16}
            borderRadius={8}
          />
        ) : null}
      </SRow>
      <SBox position="absolute" top={0} left={0} height="100%" flex={1}>
        <AnimatedGradient angle={8} gradientWidth={160} />
      </SBox>
    </SBox>
  );
};