import React from 'react';

interface Props {
  id: string;
  name: string;
  options: any[];
  className?: string;
  defaultValue?: string;
  value?: string;
  hasError?: boolean;
  goodInput?: boolean;
  onChange(e: React.ChangeEvent<any>): void;
}

const SelectInput = ({
  id,
  name,
  className,
  hasError,
  goodInput,
  defaultValue,
  value,
  onChange,
  options,
}: Props): JSX.Element => {
  return (
    <select
      name={name}
      id={id}
      onChange={onChange}
      defaultValue={defaultValue}
      value={value}
      className={`form-input text-sm border border-slate-200 rounded-md py-2 px-4 placeholder:text-xs focus:outline-none ${
        className || 'w-full'
      }   ${
        hasError ? '!border-rose-300' : goodInput ? '!border-emerald-300' : ''
      }`}
    >
      {options?.map((option, key) => (
        <option key={key} value={option}>
          {String(option)}
        </option>
      ))}
    </select>
  );
};

export default SelectInput;