import React, { FC } from 'react'
import { EnvironmentalData, LeadTime } from '../model/models'
import AlternateDeliveryDate from '../components/AlternateDeliveryDate'

export declare interface HomeDeliveryProps {
  serviceDescription: string
  environmentalData?: EnvironmentalData
  selectedDeliveryDate?: string
  leadTime?: LeadTime
  onSelect: (id: string) => void
}

const HomeDelivery: FC<HomeDeliveryProps> = ({
  serviceDescription,
  environmentalData,
  selectedDeliveryDate,
  leadTime,
  onSelect,
}) => {
  return (
    <div>
      <div className="flex flex-dir-row gas mtm flex-wrap">
        {leadTime?.deliveryDateAlternatives?.map(alternative => (
          <AlternateDeliveryDate
            key={alternative.deliveryDate}
            deliveryDate={alternative}
            checked={alternative.deliveryDate === selectedDeliveryDate}
            onSelect={onSelect}
          />
        ))}
      </div>
      <p className="service_description mtm">{serviceDescription}</p>
      {environmentalData?.fossilFree && (
        <div className="environmental mtm">
          <img src={environmentalData.tagUrl} alt="" />
        </div>
      )}
    </div>
  )
}

export default HomeDelivery
