import Link from "next/link";
import { getAssignedEvents } from "@/lib/api/petugas";
import { formatDate } from "@/lib/format";
import { FOCUS_RING_CLASSES } from "@/components/ui/styles";
import { cn } from "@/lib/utils";

export default async function PetugasEventsPage() {
  const { data: events } = await getAssignedEvents();

  return (
    <div>
      <h2 className="text-lg font-semibold">Assigned Events</h2>

      {events.length === 0 ? (
        <p className="mt-4 text-sm text-kolabora-neutral-dark/70">
          You haven&apos;t been assigned to any events yet. Contact the event&apos;s Organizer.
        </p>
      ) : (
        <div className="mt-4 flex flex-col divide-y divide-kolabora-neutral-dark/10 rounded-xl border border-kolabora-neutral-dark/10">
          {events.map((event) => (
            <Link
              key={event.id}
              href={`/petugas/events/${event.id}`}
              className={cn("flex flex-col gap-1 px-4 py-3 hover:bg-kolabora-neutral-dark/5", FOCUS_RING_CLASSES)}
            >
              <span className="font-medium">{event.title}</span>
              <span className="text-sm text-kolabora-neutral-dark/70">
                {formatDate(event.start_date)}
                {event.location ? ` · ${event.location}` : ""}
              </span>
            </Link>
          ))}
        </div>
      )}
    </div>
  );
}