const Select = ({ name, id, label, touched, error, ...props }: any) => {
  return (
    <>
      {label && <label htmlFor={id || name}>{label}</label>}
      <select name={name} id={id || name} {...props}>
        {props.children}
      </select>
      {touched && error && <div className='error'>{error}</div>}
      <style jsx>{`
        label {
          display: none;
        }
        select {
          border: none;
          decoration: none;
          -moz-decoration: none;
          -webkit-decoration: none;
        }
      `}</style>
    </>
  )
}

export default Select
