import React from 'react';
import { getDate, isToday } from 'date-fns';
import { buildClassName } from '../../../shared/utils/class-util';

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

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

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

  const classNames = buildClassName([
    'calendar__day',
    isToday(day) && 'calendar__day--today',
    isDisabled && 'calendar__day--disabled',
    isOutsideMonth && 'calendar__day--outside-month',
    isSelected && 'calendar__day--selected',
    ...extraClassNames
  ]);

  return (
    <div className={classNames} onClick={handleClick} onMouseOver={handleMouseOver}>
      {getDate(day).toString().padStart(2, '0')}
      {children}
    </div>
  );
};

export default CalendarDay;