import React, { Fragment } 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 SearchResult = ({ opacity, nItems = 1 }: IProps) => {
  const items = [...Array(nItems).keys()].map((_, index) => (
    <Fragment key={index}>
      <Box flexDirection="row" padding={'spacing-s'}>
        <Box marginRight={'spacing-xs'}>
          <AnimatedBox
            backgroundColor="gray25"
            borderRadius={4}
            opacity={opacity}
            width={Normalize(65)}
            height={Normalize(65)}
          />
        </Box>
        <Box width={'75%'} flexDirection={'column'}>
          <AnimatedBox
            backgroundColor="gray25"
            borderRadius={4}
            opacity={opacity}
            width={'35%'}
            height={Normalize(16)}
            marginBottom={'spacing-xs'}
          />
          <AnimatedBox
            backgroundColor="gray25"
            borderRadius={4}
            opacity={opacity}
            width={'100%'}
            height={Normalize(16)}
            marginBottom={'spacing-xs'}
          />
          <AnimatedBox
            backgroundColor="gray25"
            borderRadius={4}
            opacity={opacity}
            width={'50%'}
            height={Normalize(16)}
            marginBottom={'spacing-xs'}
          />
          <AnimatedBox
            backgroundColor="gray25"
            borderRadius={4}
            opacity={opacity}
            width={'58%'}
            height={Normalize(16)}
            marginBottom={'spacing-xs'}
          />
          <Box
            justifyContent={'flex-start'}
            flexDirection={'row'}
            alignItems={'center'}
            marginBottom={'spacing-xs'}
            width={'45%'}
          >
            <AnimatedBox
              backgroundColor="gray25"
              borderRadius={4}
              opacity={opacity}
              width={Normalize(16)}
              height={Normalize(16)}
              marginRight={'spacing-xxs'}
            />
            <AnimatedBox
              flex={1}
              backgroundColor="gray25"
              borderRadius={4}
              opacity={opacity}
              height={Normalize(16)}
            />
          </Box>
          <Box
            justifyContent={'flex-start'}
            flexDirection={'row'}
            alignItems={'center'}
            width={'58%'}
          >
            <AnimatedBox
              backgroundColor="gray25"
              borderRadius={4}
              opacity={opacity}
              width={Normalize(16)}
              height={Normalize(16)}
              marginRight={'spacing-xxs'}
            />
            <AnimatedBox
              backgroundColor="gray25"
              borderRadius={4}
              opacity={opacity}
              flex={1}
              height={Normalize(16)}
            />
          </Box>
        </Box>
      </Box>
      {index < nItems - 1 && <Divisor type="line" />}
    </Fragment>
  ));

  return <>{items}</>;
};