import React from 'react';
import { getDate, isToday } from 'date-fns';

// Props interface
interface CalendarDayProps {
  day: Date;
  isSelected: boolean;
  isDisabled: boolean;
  isOutsideMonth: boolean;
  extraClassNames?: string[];
  onClick: (date: Date) => void;
  onMouseOver: (date: Date) => void;
}

const CalendarDay: React.FC<CalendarDayProps> = ({ day, isSelected, isDisabled, isOutsideMonth, extraClassNames = [], onClick, onMouseOver }) => {
  // Event handlers
  const handleClick = () => {
    if (!isDisabled) {
      onClick(day);
    }
  };

  const handleMouseOver = () => {
    if (!isDisabled) {
      onMouseOver(day);
    }
  };

  // Dynamic class list
  const classNames = [
    'calendar__day',
    isToday(day) && 'calendar__day--today',
    isDisabled && 'calendar__day--disabled',
    isOutsideMonth && 'calendar__day--outside-month',
    isSelected && 'calendar__day--selected',
    ...extraClassNames
  ]
    .filter(Boolean)
    .join(' ');

  // JSX
  return (
    <div className={classNames} onClick={handleClick} onMouseOver={handleMouseOver} role="button" tabIndex={0}>
      {getDate(day)}
    </div>
  );
};

export default CalendarDay;