/* eslint-disable @typescript-eslint/prefer-optional-chain */
import CalendarIcon from '@heroicons/react/24/solid/CalendarDaysIcon'

import type { Item } from '#types/Item'

/**
 * @category Map
 */
export const StartEndView = ({ item }: { item?: Item }) => {
  return (
    <div className='tw:flex tw:flex-row tw:mb-4 tw:mt-1'>
      <div className='tw:basis-2/5 tw:flex tw:flex-row'>
        <CalendarIcon className='tw:h-4 tw:w-4 tw:mr-2' />
        <time
          className='tw:align-middle'
          dateTime={item && item.start ? item.start.substring(0, 10) : ''}
        >
          {item && item.start ? new Date(item.start).toLocaleDateString() : ''}
        </time>
      </div>
      <div className='tw:basis-1/5 tw:place-content-center'>
        <span>-</span>
      </div>
      <div className='tw:basis-2/5 tw:flex tw:flex-row'>
        <CalendarIcon className='tw:h-4 tw:w-4 tw:mr-2' />
        <time
          className='tw:align-middle'
          dateTime={item && item.end ? item.end.substring(0, 10) : ''}
        >
          {item && item.end ? new Date(item.end).toLocaleDateString() : ''}
        </time>
      </div>
    </div>
  )
}
