import * as React from 'react';
import styles from './FormField.module.scss';

export interface ISelectOption {
  value: string;
  label: string;
}

export interface ISelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'children'> {
  options: ISelectOption[];
  placeholder?: string;
}

export const Select: React.FC<ISelectProps> = ({ options, placeholder, ...rest }) => (
  <select {...rest} className={styles.select}>
    {placeholder && <option value="">{placeholder}</option>}
    {options.map(opt => (
      <option key={opt.value} value={opt.value}>{opt.label}</option>
    ))}
  </select>
);