import { useQuery } from "@tanstack/react-query";
import { AgendaItem } from "@shared/schema";
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
import { format } from "date-fns";
import { Skeleton } from "@/components/ui/skeleton";

export default function Agenda() {
  const { data: agendaItems, isLoading } = useQuery<AgendaItem[]>({
    queryKey: ["/api/agenda"],
  });

  if (isLoading) {
    return (
      <div className="space-y-2">
        {[...Array(3)].map((_, i) => (
          <div key={i} className="space-y-2">
            <Skeleton className="h-8 w-full" />
            <Skeleton className="h-4 w-3/4" />
          </div>
        ))}
      </div>
    );
  }

  return (
    <Accordion type="single" collapsible className="w-full">
      {agendaItems?.map((item) => (
        <AccordionItem key={item.id} value={item.id.toString()}>
          <AccordionTrigger>
            <div className="flex flex-col items-start">
              <span className="font-semibold">{item.title}</span>
              <span className="text-sm text-muted-foreground">
                {format(new Date(item.startTime), "h:mm a")} -{" "}
                {format(new Date(item.endTime), "h:mm a")}
              </span>
            </div>
          </AccordionTrigger>
          <AccordionContent>
            <p className="text-sm text-muted-foreground">{item.description}</p>
            {item.speakerId && (
              <p className="text-sm mt-2">
                Speaker: {/* Add speaker name from context if needed */}
              </p>
            )}
          </AccordionContent>
        </AccordionItem>
      ))}
    </Accordion>
  );
}
