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 focusStyles = 'focus:outline-none focus:shadow focus:border-gray-400';
const baseStyles = 'p-2 border bg-white border-gray-300 rounded-sm';

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-sm text-gray-600">{label}</label>
      <select
        id={props?.name}
        placeholder={label}
        className={`${baseStyles} ${focusStyles}`}
        {...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 { SelectBase };
export default Select;