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

interface IProps extends IOpacity {
  nItems?: number;
}

export const AutoComplete = ({ opacity, nItems = 1 }: IProps) => {
  const items = [...Array(nItems).keys()].map((_, index) => (
    <Box
      key={index}
      flexDirection="row"
      alignItems="center"
      paddingHorizontal={'spacing-s'}
      paddingVertical={'spacing-xs'}
    >
      <Box marginRight="spacing-xs">
        <AnimatedBox
          backgroundColor="gray25"
          borderRadius={4}
          opacity={opacity}
          width={Normalize(40)}
          height={Normalize(40)}
        />
      </Box>
      <Box flex={1}>
        <AnimatedBox
          backgroundColor="gray25"
          marginBottom="spacing-xxs"
          borderRadius={4}
          opacity={opacity}
          width={'100%'}
          height={Normalize(18)}
        />
        <AnimatedBox
          backgroundColor="gray25"
          borderRadius={4}
          opacity={opacity}
          width={Normalize(46)}
          height={Normalize(18)}
        />
      </Box>
      <Box
        marginLeft={'spacing-xs'}
        alignItems={'center'}
        justifyContent={'center'}
      >
        <AnimatedBox
          backgroundColor="gray25"
          borderRadius={4}
          marginTop="spacing-xxs"
          opacity={opacity}
          width={Normalize(16)}
          height={Normalize(16)}
        />
      </Box>
    </Box>
  ));
  return <>{items}</>;
};