import cx from "../../../utils/css/cx.js";
import useDateFormat from "../../../hooks/useDateFormat/index.js";
import getCalendarNote from "../../../utils/election/getCalendarNote/index.js";
import PartyTags from "../PartyTags/index.js";
import classes from './styles.module.scss';
const cls = cx.merge(classes);
export default function DateCard({
  date,
  isNationalGeneral,
  ...props
}) {
  const day = useDateFormat(date, {
    format: '{D}',
    timeZone: 'UTC'
  });
  const apDate = useDateFormat(date, {
    format: '{apdate}',
    timeZone: 'UTC'
  });
  const month = apDate.split(' ')[0];
  const note = isNationalGeneral ? props.state : getCalendarNote(props) || 'All primaries';
  return <div className={cls('date-card', 'shadow-100')}>
      <div className={cls('header')}>
        <span className={cls('month')}>{month}</span>
        <span className={cls('day')}>{day}</span>
      </div>
      <div className={cls('election')}>
        <PartyTags parties={props.parties} />
        <p className={cls('note')}>{note}</p>
      </div>
    </div>;
}