import { Metadata } from "next";
import { notFound } from "next/navigation";
import { Shell } from "@/components/shell";
import { SponsorEditor } from "@/components/dashboard/sponsor/sponsor-editor";
import { createHelpers } from "@/lib/trpc/server";

type Props = {
    params: Promise<{ id: string; }>;
};

export async function generateMetadata({ params }: Props): Promise<Metadata> {
    const { id } = await params;

    const helpers = await createHelpers();

    const sponsor = await helpers.sponsor.get.fetch({
        id
    });

    if(!sponsor) {
        return {
            title: "Sponsor not found",
            description: "The requested sponsor not be found."
        };
    }

    return {
        title: `Edit: ${sponsor.title}`,
        description: `Edit: ${sponsor.title}`
    };
}

export default async function Page({ params }: Props) {
    const { id } = await params;

    const helpers = await createHelpers();

    const sponsor = await helpers.sponsor.get.fetch({
        with: ["logo"],
        id
    });

    if(!sponsor) {
        notFound();
    }

    return (
        <Shell className="gap-2">
            <div className="flex items-center gap-4 px-4">
                <div>
                    <h1 className="text-2xl font-bold">
                        Edit Sponsor
                    </h1>
                </div>
            </div>

            <SponsorEditor mode="edit" id={sponsor.id} sponsor={sponsor} />
        </Shell>
    );
}