import React, { forwardRef, useId } from 'react';
import { Input, InputProps } from '@chakra-ui/react';

import { CAR_COLORS } from './helper';

export const CarColorInput = forwardRef<HTMLInputElement, InputProps>(
  function CarColorInput(props, ref) {
    const listId = useId();

    return (
      <>
        <Input ref={ref} list={listId} {...props} />
        <datalist id={listId}>
          {CAR_COLORS.map(({ code, name }) => (
            <option key={code} label={name} value={code}>{name}</option>
          ))}
        </datalist>
      </>
    );
  },
);

// todo: add option color visual indication