import React from 'react'

import styles from './styles.module.css'

export default function Dropdown({label: _label, error, hint, name, options: _options, children, value, onChange, onBlur, isValid}){
  const label = _label  || name.replace(name[0], name[0].toUpperCase())

  const options = children ? children : _options.map(opt => <option value={opt.value}>{opt.name}</option>)

  return (
    <div className={styles.formElementContainer}>
      <label htmlFor={name}>{label}:</label>
      <select className={(isValid && !error)?'':styles.invalid} name={name} value={value} onChange={onChange} onBlur={onBlur}>
        {options}
      </select>
      {(hint || error) && <span className={styles.hint}>{error || (isValid ? '' : hint)}</span>}
    </div>
  )
}