import React from 'react';
import { Platform } from 'react-native';
import { SBox } from '../../../common/s-components/layout/s-box';
import { AnimatedGradient } from '../../../common/components/animated-gradient';

export const Skeleton: React.FC = () => {
  const isAndrod = Platform.OS === 'android';
  return (
    <SBox height={137} mt={isAndrod ? -30 : 0} width={80} alignSelf="center">
      <SBox
        position="relative"
        px={16}
        mb={0}
        mt={10}
        height={80}
        alignItems="center"
        overflow="hidden"
      >
        <SBox width={80} height={80} mb={32} borderRadius={10} bg="eastBay" />

        <SBox position="absolute" top={0} left={0} height="100%" flex={1}>
          <AnimatedGradient angle={8} gradientWidth={160} />
        </SBox>
      </SBox>
    </SBox>
  );
};