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

interface IProps extends IOpacity {
  nItems?: number;
}

export const OrderCard = ({ opacity, nItems = 1 }: IProps) => {
  const items = [...Array(nItems).keys()].map((_, index) => (
    <>
      <Box key={index} width={'100%'} p={'spacing-s'}>
        <AnimatedBox
          mb={'spacing-xms'}
          backgroundColor="gray25"
          borderRadius={4}
          opacity={opacity}
          width={Normalize(106)}
          height={Normalize(34)}
        />
        <Box width={'100%'} flexDirection={'row'}>
          <Box width={'63%'} pr={'spacing-xs'}>
            <AnimatedBox
              backgroundColor="gray25"
              mb="spacing-xs"
              borderRadius={4}
              opacity={opacity}
              width={'100%'}
              height={Normalize(16)}
            />
            <AnimatedBox
              backgroundColor="gray25"
              mb="spacing-xs"
              borderRadius={4}
              opacity={opacity}
              width={'100%'}
              height={Normalize(16)}
            />
            <AnimatedBox
              backgroundColor="gray25"
              borderRadius={4}
              opacity={opacity}
              width={Normalize(69)}
              height={Normalize(16)}
            />
          </Box>
          <Box
            width={'37%'}
            flexDirection={'row'}
            alignSelf={'center'}
            position={'relative'}
            bottom={Normalize(12)}
            pl={'spacing-xs'}
          >
            <AnimatedBox
              mr={'spacing-xs'}
              backgroundColor="gray25"
              borderRadius={4}
              opacity={opacity}
              flex={1}
              height={Normalize(16)}
            />
            <AnimatedBox
              backgroundColor="gray25"
              borderRadius={4}
              opacity={opacity}
              width={Normalize(16)}
              height={Normalize(16)}
            />
          </Box>
        </Box>
      </Box>
      {index < nItems - 1 && <Divisor type="line" />}
    </>
  ));
  return <>{items}</>;
};