import Card from "../../../structure/Card/index.js";
import ResultsTable from "../../ResultsTable/index.js";
import classnames from 'classnames';
import { useIsMobile } from "../../../../hooks/breakpoint/index.js";
import { DataAnimationContext } from "../../../../hooks/election/useAnimateDataChanges/index.js";
import classes from './styles.module.scss';
const CountyTooltip = function CountyTooltip(props) {
  const {
    code,
    name,
    colors
  } = props;
  const config = colors.fipsToPalette.get(code);
  const isMobile = useIsMobile();
  if (!config) return null;
  return <Card edge="sharp" shadow={isMobile ? '200' : '100'} padding={{
    x: '3',
    y: '2'
  }}>
      <div className={classes.content}>
        <div className={classnames(classes.countyName)}>
          {name}
        </div>
        <DataAnimationContext.Provider value={{
        shouldAnimate: false
      }}>
          <ResultsTable id={config.id} format="tooltip" expandable="aggregationOnly" />
        </DataAnimationContext.Provider>
      </div>
    </Card>;
};
export default CountyTooltip;