import { IfActive } from "../../../application/index.js";
import { useContainerBreakpointIsAtLeast } from "../../../../hooks/breakpoint/index.js";
import classes from './styles.module.scss';
import District from '../District';
import Header from './Header';
import Footer from './Footer';
const Table = function Table(props) {
  const {
    districts,
    stateFips,
    contestType,
    isAllParty,
    hasIncumbent
  } = props;
  const isMd = useContainerBreakpointIsAtLeast('md');
  return <div className={classes.container}>
      <IfActive active={isMd}>
        <Header isAllParty={isAllParty} />
      </IfActive>
      <div className={classes.districts}>
        {districts.map(district => <District key={district.districtNumber} districtNumber={district.districtNumber} contests={district.contests} stateFips={stateFips} contestType={contestType} isAllParty={isAllParty} />)}
      </div>
      <IfActive active={hasIncumbent}>
        <Footer />
      </IfActive>
    </div>;
};
export default Table;