import PropTypes from 'prop-types';
import Card from "../../structure/Card/index.js";
import { useIsMobile } from "../../../hooks/breakpoint/index.js";
import { DataAnimationContext } from "../../../hooks/election/useAnimateDataChanges/index.js";
import Leaderboard from "../Leaderboard/index.js";
import classes from './styles.module.scss';
const ElectionMapTooltip = function ElectionMapTooltip(props) {
  const {
    name,
    config
  } = props;
  const isMobile = useIsMobile();
  if (!config) return null;
  return <Card edge="sharp" shadow={isMobile ? '200' : '100'} padding={{
    x: '3',
    y: '2'
  }}>
      <div className={classes.content}>
        <DataAnimationContext.Provider value={{
        shouldAnimate: false
      }}>
          <Leaderboard contestId={config.contestId} format="tooltip" expandable="aggregationOnly" contestName={name} />
        </DataAnimationContext.Provider>
      </div>
    </Card>;
};
ElectionMapTooltip.defaultProps = {
  name: undefined
};
ElectionMapTooltip.propTypes = {
  /**
   * Optional name to override the default title, which is the contests name
   * as determined by the contestId provided in the config
   */
  name: PropTypes.string,
  /**
   * Details for what contest's results table to show
   */
  config: PropTypes.shape({
    contestId: PropTypes.string
  }).isRequired
};
export default ElectionMapTooltip;