import React, { FC } from 'react'
import { DeliveryDateAlternative } from '../model/models'

export declare interface AlternateDeliveryDateProps {
  deliveryDate: DeliveryDateAlternative
  checked: boolean
  onSelect: (id: string) => void
}

const AlternateDeliveryDate: FC<AlternateDeliveryDateProps> = ({
  deliveryDate,
  checked,
  onSelect,
}) => {
  return (
    <div className="alt_box radio">
      <label htmlFor={`alt_${deliveryDate.deliveryDate}`}>
        <input
          id={`alt_${deliveryDate.deliveryDate}`}
          type="radio"
          value={deliveryDate.deliveryDate}
          name="delivery_date"
          className="radio__checkmark"
          checked={checked}
          onChange={event => {
            if (event.currentTarget.checked) {
              onSelect(deliveryDate.deliveryDate)
            }
          }}
        />
        <div className="flex flex-dir-col mtl">
          <span className="text-1r">{deliveryDate.description}</span>
          <span className="text-0.75r">
            {deliveryDate.deliveryDateFormatted}
          </span>
        </div>
      </label>
    </div>
  )
}

export default AlternateDeliveryDate
