import { Text } from "@fluentui/react-components";
import { useJailsPageStyles } from "./jails/jailsPageStyles";
import { JailOverviewSection } from "./jails/JailOverviewSection";
import { BanUnbanForm } from "./jails/BanUnbanForm";
import { IpLookupSection } from "./jails/IpLookupSection";
import { useActiveBans, useJails } from "../hooks/useJails";

export function JailsPage(): React.JSX.Element {
  const styles = useJailsPageStyles();
  const { jails } = useJails();
  const { banIp, unbanIp } = useActiveBans();

  const jailNames = jails.map((j) => j.name);

  return (
    <div className={styles.root}>
      <Text as="h1" size={700} weight="semibold">
        Jails
      </Text>

      <JailOverviewSection />

      <BanUnbanForm jailNames={jailNames} onBan={banIp} onUnban={unbanIp} />

      <IpLookupSection />
    </div>
  );
}
