import React from 'react';
import { Field } from 'formik';

export interface Option {
  key: string;
  label: string;
}

export interface Props extends React.SelectHTMLAttributes<HTMLSelectElement> {
  label?: string;
  options: Option[];
}

const SelectBase: React.FC<Props> = ({ label, options, ...props }) => {
  return (
    <div className="m-2 mb-4 flex flex-col">
      <label htmlFor={props?.name} className="mb-1 text-gray-700">{label}</label>
      <select
        id={props?.name}
        placeholder={label}
        className="p-2 border-2 border-black bg-white focus:outline-none"
        {...props}
      >
        {options?.map(option => (
          <option value={option.key} key={option.key}>{option.label}</option>
        ))}
      </select>
    </div>
  );
};

const Select: React.FC<Props> = props => <Field {...props} as={SelectBase} />;

export default Select;