import React from 'react'

import { CalendarItem as YearItem, CalendarItemsContainer } from '../calendar.styles'
import { TimeResult } from '../calendar.types'

type YearPickerProps = {
  calendar: TimeResult
  onSelectYear?: (date: Date) => void
}

export const YearPicker = ({ calendar, onSelectYear }: YearPickerProps) => (
  <CalendarItemsContainer className="vui-year-picker">
    {calendar.items.map(item => (
      <YearItem
        fontWeight={500}
        key={item.date.getTime()}
        onClick={(!item.isDisabled && onSelectYear?.(item.date)) || undefined}
        {...item}
      >
        {item.date.getUTCFullYear()}
      </YearItem>
    ))}
  </CalendarItemsContainer>
)
