import React from 'react'
import { ReactComponent as ArrowDown } from '$assets/icons/arrowDown.svg'

import './TextField.scss'

const SelectField = ({ error, isRequired, isReadOnly, label, name, options, value, onBlur, onInput }) => (
  <div
    className={`form-field ${error ? 'form-field-invalid' : ''} ${isRequired ? 'form-field-required' : ''}`}
  >
    <label className="form-field-label" htmlFor={name}>{label}:</label>
    <div className="form-field-select-wrapper">
      <select
        className="form-field-input"
        disabled={isReadOnly}
        id={name}
        name={name}
        onBlur={onBlur}
        onChange={onInput}
        value={value}
      >
        <option value="" />
        {options.map((option) => (
          <option key={option.Value} value={option.Value}>
            {option.Name}
          </option>
        ))}
      </select>
      <ArrowDown className="form-field-select-arrow" />
    </div>
    {error && <span className="form-field-error">{error}</span>}
  </div>
)

export default SelectField
