import Link from "next/link";
import { notFound } from "next/navigation";
import { getAssignedEvent } from "@/lib/api/petugas";
import { ManualCheckin } from "@/components/petugas/manual-checkin";
import { FOCUS_RING_CLASSES } from "@/components/ui/styles";
import { cn } from "@/lib/utils";

export default async function PetugasSearchPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const event = await getAssignedEvent(id);

  if (!event) {
    notFound();
  }

  return (
    <div>
      <Link
        href={`/petugas/events/${event.id}`}
        className={cn("rounded text-sm font-medium text-kolabora-primary", FOCUS_RING_CLASSES)}
      >
        &larr; Back
      </Link>
      <h2 className="mt-4 text-lg font-semibold">Search & Manual Check-in &mdash; {event.title}</h2>
      <div className="mt-4">
        <ManualCheckin eventId={event.id} />
      </div>
    </div>
  );
}