import React from 'react';
import { AnimatedBox, Box } from '../Box';
import { Normalize } from '../../utils/normalize';

import type { IOpacity } from './skeleton';

export const ProductCart = ({ opacity }: IOpacity) => {
  return (
    <Box
      flexDirection="row"
      justifyContent={'space-between'}
      alignItems={'flex-start'}
    >
      <Box
        marginRight="spacing-xs"
        flexDirection="column"
        justifyContent={'center'}
        alignItems="center"
      >
        <AnimatedBox
          backgroundColor="gray25"
          borderRadius={Normalize(4)}
          width={Normalize(130)}
          height={Normalize(130)}
          opacity={opacity}
          marginBottom="spacing-xs"
        />
        <Box flexDirection="row" justifyContent={'center'} alignItems="center">
          <AnimatedBox
            borderRadius={Normalize(100)}
            width={Normalize(24)}
            height={Normalize(24)}
            backgroundColor="gray25"
            marginRight="spacing-xs"
            opacity={opacity}
          />
          <AnimatedBox
            borderRadius={Normalize(4)}
            width={Normalize(50)}
            height={Normalize(16)}
            backgroundColor="gray25"
            marginRight="spacing-xs"
          />
          <AnimatedBox
            borderRadius={Normalize(100)}
            width={Normalize(24)}
            height={Normalize(24)}
            backgroundColor="gray25"
            opacity={opacity}
          />
        </Box>
      </Box>
      <Box justifyContent={'center'} flex={1} flexDirection={'column'}>
        <AnimatedBox
          backgroundColor="gray25"
          borderRadius={Normalize(4)}
          width={Normalize(178)}
          height={Normalize(16)}
          marginBottom="spacing-xs"
          opacity={opacity}
        />
        <AnimatedBox
          borderRadius={Normalize(4)}
          width={Normalize(80)}
          height={Normalize(16)}
          marginBottom="spacing-xs"
          backgroundColor="gray25"
          opacity={opacity}
        />
        <AnimatedBox
          borderRadius={Normalize(4)}
          width={Normalize(110)}
          height={Normalize(16)}
          marginBottom="spacing-xs"
          backgroundColor="gray25"
          opacity={opacity}
        />
        <AnimatedBox
          borderRadius={Normalize(4)}
          width={Normalize(60)}
          height={Normalize(16)}
          backgroundColor="gray25"
          marginBottom="spacing-m"
          opacity={opacity}
        />
        <Box flexDirection="row">
          <AnimatedBox
            borderRadius={Normalize(4)}
            width={Normalize(130)}
            height={Normalize(16)}
            backgroundColor="gray25"
            marginRight="spacing-xs"
            opacity={opacity}
          />
          <AnimatedBox
            borderRadius={Normalize(100)}
            width={Normalize(16)}
            height={Normalize(16)}
            backgroundColor="gray25"
            opacity={opacity}
          />
        </Box>
      </Box>

      <Box position={'absolute'} top={3} left={16}>
        <AnimatedBox
          borderRadius={Normalize(4)}
          width={Normalize(60)}
          height={Normalize(16)}
          backgroundColor="gray25"
        />
      </Box>
    </Box>
  );
};