import Link from "next/link";
import { notFound } from "next/navigation";
import { AdminPageHeader, StatusBadge } from "@/components/admin/admin-ui";
import { VenueManagementForm } from "@/components/admin/venue-management-form";
import { getAdminVenue } from "@/lib/admin-data";

export default async function AdminVenuePage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const venue = await getAdminVenue(id);
  if (!venue) notFound();
  return (
    <div className="min-h-[42rem] pb-8">
      <AdminPageHeader
        eyebrow="Venue management"
        title={venue.name}
        description={`${venue.addressLine1}, ${venue.location}`}
        action={
          <div className="flex items-center gap-4">
            <StatusBadge value={venue.active ? "active" : "inactive"} />
            <Link href="/admin/venues" className="inline-flex items-center gap-1.5 text-xs font-semibold text-slate-500 transition hover:text-[#1D4ED8]">
              <span className="material-symbols-outlined text-[18px]">arrow_back</span>
              Venues
            </Link>
          </div>
        }
      />
      <VenueManagementForm venue={venue} />
    </div>
  );
}