import Link from "next/link";
import { getPolls } from "@/lib/data";
import type { Poll } from "@/types";

export const dynamic = "force-dynamic";

export default function HomePage() {
  // STAP 2: Haal alle polls op met getPolls()
  // Dit is een Server Component — je kunt gewoon functies aanroepen!

  return (
    <div>
      <h1 className="text-3xl font-bold text-gray-900 mb-2">Actieve Polls</h1>
      <p className="text-gray-500 mb-8">Klik op een poll om te stemmen</p>

      <div className="grid gap-4">
        {/*
          STAP 2: Map over de polls en toon voor elke poll:
          - De vraag (poll.question)
          - Het aantal opties en stemmen
          - De opties als tags/badges
          - Wrap het in een <Link> naar /poll/{poll.id}

          Tip: maak een helper functie voor het totaal aantal stemmen:
          const totalVotes = (poll: Poll): number =>
            poll.votes.reduce((sum, v) => sum + v, 0);
        */}
      </div>
    </div>
  );
}