import React from 'react';

interface IOption {
  label: string;
  value: string | number;
}

interface ISelectProps {
  id?: string;
  name?: string;
  value?: string | number;
  className?: string;
  placeholder?: string; // Used as the first disabled option
  hasError?: boolean;
  goodInput?: boolean;
  options: IOption[];
  onChange(e: React.ChangeEvent<HTMLSelectElement>): void;
  onBlur?(e: React.FocusEvent<HTMLSelectElement>): void;
}

const Select = ({
  id,
  name,
  value,
  placeholder,
  className,
  hasError,
  goodInput,
  options,
  onChange,
  onBlur,
}: ISelectProps): JSX.Element => {
  return (
    <select
      id={id}
      name={name}
      value={value}
      onChange={onChange}
      onBlur={onBlur}
      className={`form-select text-xs border border-slate-200 rounded-md py-2 px-2 focus:outline-none ${
        className || 'w-full'
      } ${
        hasError ? '!border-rose-300' : goodInput ? '!border-emerald-300' : ''
      }`}
    >
      {placeholder && (
        <option value="" disabled>
          {placeholder}
        </option>
      )}
      {options.map(option => (
        <option key={option.value} value={option.value}>
          {option.label}
        </option>
      ))}
    </select>
  );
};

export default Select;