import { Button } from "@/components/ui/button";
import { createClient } from "@/lib/supabase/server";
import Link from "next/link";

interface PageProps {
  params: Promise<{ id: string }>;
}

export default async function Page(props: PageProps) {
  const { id } = await props.params;
  const supabase = await createClient();
  const { data: polls } = await supabase.from("polls").select().eq("id", id);
  const { data: members } = await supabase
    .from("poll_members")
    .select()
    .order("id", { ascending: true })
    .eq("poll_id", id);

  if (!polls || polls.length === 0) {
    return <div className="max-w-6xl mx-auto py-2 w-[95%]">Poll not found</div>;
  }

  const [poll] = polls;

  return (
    <main className="max-w-6xl mx-auto py-4 w-[95%] h-screen flex flex-col gap-4">
      <h1 className="text-center text-xl font-semibold">{poll.name}</h1>
      <div className="grid gap-4 grid-cols-2 h-full">
        {members?.map((m) => (
          <Button
            key={m.id}
            className="h-full bg-primary/50 border-primary text-xl"
            variant="outline"
            asChild
          >
            <Link href={`/polls/${id}/members/${m.id}`}>{m.name}</Link>
          </Button>
        ))}
      </div>
    </main>
  );
}