import type { Contract } from "@deadhead/schema";
import { useState } from "react";
import { useLoadedPlayer } from "../state/actions";
import { LocationBoards } from "./LocationBoards";
import { DispatchSheet } from "./DispatchSheet";
import { TutorialBoard } from "./TutorialBoard";

/** Contracts: the tutorial board during the tutorial, location boards afterwards. */
export function Contracts() {
  const state = useLoadedPlayer();
  const [selected, setSelected] = useState<Contract | null>(null);
  return (
    <section className="space-y-3 p-4">
      <h1 className="text-xl font-semibold">Contracts</h1>
      {state.tutorial ? <TutorialBoard /> : <LocationBoards onSelect={setSelected} />}
      {selected && <DispatchSheet contract={selected} onClose={() => setSelected(null)} />}
    </section>
  );
}