import React from 'react'
import { ReactComponent as CalendarIcon } from '$assets/icons/calendar.svg'

import './TextField.scss'

const DateField = ({ error, isRequired, isReadOnly, isDateOnly, label, name, 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-date-wrapper">
      <input
        className="form-field-input"
        disabled={isReadOnly}
        id={name}
        name={name}
        onBlur={onBlur}
        onChange={onInput}
        type={isDateOnly ? 'date' : 'datetime-local'}
        value={value}
      />
      <CalendarIcon className="form-field-date-icon" />
    </div>
    {error && <span className="form-field-error">{error}</span>}
  </div>
)

export default DateField
