import useDateFormat from "../../../../../../../hooks/useDateFormat/index.js";
import { ordinal } from 'journalize';
import SpecialDateLabel from './SpecialDateLabel';
import classes from './styles.module.scss';
const DateHeader = function DateHeader(props) {
  const {
    day,
    specialDates
  } = props;
  const formattedMonth = useDateFormat(day, {
    format: 'Q',
    timeZone: 'UTC'
  });
  const formattedDay = useDateFormat(day, {
    format: 'd',
    timeZone: 'UTC'
  });
  const specialLabel = specialDates.find(d => d.date === day);
  return <div className={classes.container}>
      <span className={classes.month}>{formattedMonth}</span>
      <SpecialDateLabel>
        {specialLabel?.label}
      </SpecialDateLabel>
      <span className={classes.day}>{ordinal(formattedDay)}</span>
    </div>;
};
export default DateHeader;