"use client";

import { useState } from "react";
import { topics } from "@/data/topics";
import TopicVoteCard from "./TopicVoteCard";

export default function ConsultationList() {
  const [open, setOpen] = useState(false);
  const active = topics.filter((t) => t.status === "aktywne");

  return (
    <div>
      {!open ? (
        <button
          onClick={() => setOpen(true)}
          className="rounded-full border px-5 py-2 text-sm hover:bg-gray-50"
        >
          Zobacz aktualne tematy do konsultacji
        </button>
      ) : (
        <div className="mt-2">
          <div className="flex items-center justify-between mb-4">
            <h2 className="text-xl font-bold">Aktualne tematy</h2>
            <button
              onClick={() => setOpen(false)}
              className="text-sm text-gray-500 hover:text-gray-900"
            >
              Zwiń
            </button>
          </div>

          <div className="space-y-4">
            {active.map((t) => (
              <TopicVoteCard key={t.id} topic={t} />
            ))}
          </div>
        </div>
      )}
    </div>
  );
}