import { useLoaderData } from "react-router";
import { CampaignForm, DeleteCampaignForm } from "@/components/CampaignForm";
import { useTitle } from "@/lib/title";
import type { EditData } from "@/router";

/** Campaigns are created directly in the database; this only edits one. */
export default function EditCampaign() {
  const { campaign, owners } = useLoaderData() as EditData;
  useTitle(campaign.title);

  return (
    <>
      <h1 className="mt-8 font-display text-3xl">{campaign.title}</h1>

      <CampaignForm campaign={campaign} owners={owners} />

      <div className="mt-10 border-t border-line pt-5">
        <DeleteCampaignForm slug={campaign.slug} />
      </div>
    </>
  );
}