import { AutoLayout } from "../../layout/index.js";
import { IfActive } from "../../application/index.js";
import PropTypes from "../../../utils/prop-types/index.js";
import cx from "../../../utils/css/cx.js";
import { ElectionLink, ElectionIcon } from "../index.js";
import DelegateCounterOvertime from '../DelegateCounterOvertime';
import classes from './styles.module.scss';
const cls = cx.merge(classes);
const EmbedDelegateTracker = function EmbedDelegateTracker({
  recirculationLinkPosition,
  description,
  party,
  displayCandidates,
  displayCandidatesNumber
}) {
  return <AutoLayout align="stretch" gap="5">
      <DelegateCounterOvertime description={description} party={party} eyebrow={{
      isLive: true,
      link: 'index:president',
      text: 'Pres. Delegate Tracker',
      tracking: {
        context: 'EmbedDelegateTracker'
      }
    }} displayCandidates={displayCandidates} displayCandidatesNumber={displayCandidatesNumber} />
      <IfActive active={recirculationLinkPosition === 'bottom'}>
        <ElectionLink to="index" className={cls('all-link')} tracking={{
        context: 'EmbedDelegateTracker',
        linkName: 'overall-recirc'
      }}>
          All 2024 Election Results
          <ElectionIcon type="LinkCaret" size="2" />
        </ElectionLink>
      </IfActive>
    </AutoLayout>;
};
EmbedDelegateTracker.defaultProps = {
  description: '',
  recirculationLinkPosition: 'bottom',
  displayCandidates: 'all',
  displayCandidatesNumber: undefined
};
EmbedDelegateTracker.propTypes = {
  /**
   * The ID of the party to show delegate counts for
   */
  party: PropTypes.oneOf(['dem', 'gop']).isRequired,
  /**
   * The position of the recric link, which can appear at the
   * bottom of the lockup. Setting this prop to `none` will prevent the
   * link from rendering at all.
   */
  recirculationLinkPosition: PropTypes.oneOf(['bottom', 'none']),
  /**
   * The optional dek for the module
   */
  description: PropTypes.string,
  /**
   * How to display candidates
   */
  displayCandidates: PropTypes.oneOf(['all', 'expand', 'exclude', 'note']),
  /**
   * How many candidates to display above the fold. Interacts with
   * `displayCandidates` prop.
   */
  displayCandidatesNumber: PropTypes.number
};
export default EmbedDelegateTracker;