import useDateFormat from "../../../../../../../hooks/useDateFormat/index.js";
import { ordinal } from 'journalize';
import classes from './styles.module.scss';
const ConventionDateHeader = function Convention(props) {
  const {
    startDate,
    endDate
  } = props;
  const timeZone = 'UTC';
  const monthFormat = {
    format: 'Q',
    timeZone
  };
  const dayFormat = {
    format: 'd',
    timeZone
  };
  const formattedMonth = useDateFormat(startDate, monthFormat);
  const formattedStartDay = useDateFormat(startDate, dayFormat);
  const formattedEndDay = useDateFormat(endDate, dayFormat);
  return <div className={classes.container}>
      <span className={classes.month}>{formattedMonth}</span>
      <span className={classes.day}>
        {`${formattedStartDay}-${ordinal(formattedEndDay)}`}
      </span>
    </div>;
};
export default ConventionDateHeader;