import React from 'react';
import { AnimatedBox, Box } from '../Box';
import type { IOpacity } from './skeleton';

export const ProductItem = ({ opacity }: IOpacity) => {
  return (
    <Box flex={1} flexDirection="row" alignItems="center">
      <Box marginRight="spacing-xs">
        <AnimatedBox
          backgroundColor="gray25"
          borderRadius={4}
          opacity={opacity}
          width={48}
          height={48}
        />
      </Box>
      <Box flex={1}>
        <AnimatedBox
          backgroundColor="gray25"
          borderRadius={4}
          opacity={opacity}
          width={160}
          height={12}
          marginBottom="spacing-xs"
        />
        <AnimatedBox
          width={120}
          height={8}
          marginBottom="spacing-xs"
          backgroundColor="gray25"
          borderRadius={4}
          opacity={opacity}
        />
        <AnimatedBox
          width={120}
          height={14}
          backgroundColor="gray25"
          borderRadius={4}
          opacity={opacity}
        />
      </Box>
      <Box>
        <AnimatedBox
          width={36}
          height={12}
          backgroundColor="gray25"
          borderRadius={4}
          opacity={opacity}
        />
      </Box>
    </Box>
  );
};