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

export const dynamic = "force-dynamic";

export default function HomePage() {
  const polls: Poll[] = getPolls();

  const totalVotes = (poll: Poll): number =>
    poll.votes.reduce((sum, v) => sum + v, 0);

  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">
        {polls.map((poll) => (
          <Link
            key={poll.id}
            href={`/poll/${poll.id}`}
            className="block bg-white rounded-xl border border-gray-200 p-6 hover:border-purple-300 hover:shadow-md transition-all"
          >
            <h2 className="text-lg font-semibold text-gray-900 mb-2">
              {poll.question}
            </h2>
            <div className="flex items-center gap-4 text-sm text-gray-500">
              <span>{poll.options.length} opties</span>
              <span>·</span>
              <span>{totalVotes(poll)} stemmen</span>
            </div>
            <div className="flex flex-wrap gap-2 mt-3">
              {poll.options.map((option, index) => (
                <span
                  key={index}
                  className="bg-gray-100 text-gray-600 px-3 py-1 rounded-full text-sm"
                >
                  {option}
                </span>
              ))}
            </div>
          </Link>
        ))}
      </div>

      {polls.length === 0 && (
        <div className="text-center py-16 text-gray-400">
          <p className="text-lg">Nog geen polls</p>
          <Link href="/create" className="text-purple-600 hover:underline">
            Maak de eerste!
          </Link>
        </div>
      )}
    </div>
  );
}
