import React from 'react';
import { YearProps } from '../../../types/calendar';
import { Month } from '../Month';
import styles from './Year.module.scss';

export const Year: React.FC<YearProps> = ({
  year,
  dayHeaderStyle,
  monthDayOfWeekHeaderStyle,
  monthCutoff,
  weekendDays,
  dateRange,
  onDateSelect,
  onDateHover,
  size = 'l',
  fontProportion = 100,
  magnify = false
}) => {
  const months = Array.from({ length: 12 }, (_, index) => {
    const monthDate = new Date(year, index, 1);
    return (
      <Month
        key={index}
        date={monthDate}
        dayHeaderStyle={dayHeaderStyle}
        monthDayOfWeekHeaderStyle={monthDayOfWeekHeaderStyle}
        direction="column"
        monthCutoff={monthCutoff}
        weekendDays={weekendDays}
        dateRange={dateRange}
        onDateSelect={onDateSelect}
        onDateHover={onDateHover}
        size={size}
        fontProportion={fontProportion}
        magnify={magnify}
      />
    );
  });

  return (
    <div className={styles.Year__Wrapper}>
      <h1 className={styles.Year__Title}>{year}</h1>
      <div className={styles.Year__MonthsGrid}>
        {months}
      </div>
    </div>
  );
};