import useDateFormat from "../../../../hooks/useDateFormat/index.js";
import partyNames from "../../../../utils/election/constants/partyNames.js";
import { useBreakpointIsAtMost } from "../../../../hooks/breakpoint/index.js";
import { AutoLayout } from "../../../layout/index.js";
import cx from "../../../../utils/css/cx.js";
import { IfActive } from "../../../application/index.js";
import classes from '../styles.module.scss';
const cls = cx.merge(classes);
export default function Convention({
  convention
}) {
  const isXS = useBreakpointIsAtMost('xs');
  const [{
    startDate,
    endDate,
    party
  }] = convention;
  const start = useDateFormat(startDate, {
    format: '{D}',
    timeZone: 'UTC'
  });
  const end = useDateFormat(endDate, {
    format: '{D}',
    timeZone: 'UTC'
  });
  return <div className={cls('sticker', {
    wrap: isXS
  })} style={{
    '--rotate': `${party === 'gop' ? '1.5deg' : '-1.5deg'}`
  }}>
      <AutoLayout direction="horizontal" gap="1">
        <span>{`${start}-${end}`}</span>
        <p>
          <b>
            <span className={cls(party)}>{partyNames[party]?.abbr}</span>
            {!isXS && ' Convention'}
          </b>
        </p>
      </AutoLayout>
      <IfActive active={isXS}>
        <p>
          <b>Convention</b>
        </p>
      </IfActive>
    </div>;
}