"use client";

import Link from "next/link";
import { Tags } from "lucide-react";
import { FollowButton } from "@/components/shared/FollowButton";

const TOPICS = [
  { tag: "healthcare", label: "Healthcare", desc: "Health policy, insurance, Medicare, Medicaid" },
  { tag: "taxation", label: "Taxation", desc: "Tax law, IRS, fiscal policy" },
  { tag: "defense", label: "Defense", desc: "Military, NDAA, national security" },
  { tag: "education", label: "Education", desc: "Schools, student loans, higher education" },
  { tag: "immigration", label: "Immigration", desc: "Border, visas, asylum, citizenship" },
  { tag: "environment", label: "Environment", desc: "Climate, EPA, conservation, energy" },
  { tag: "housing", label: "Housing", desc: "Affordable housing, mortgages, HUD" },
  { tag: "infrastructure", label: "Infrastructure", desc: "Roads, bridges, broadband, transit" },
  { tag: "technology", label: "Technology", desc: "AI, cybersecurity, telecom, internet" },
  { tag: "agriculture", label: "Agriculture", desc: "Farm bill, USDA, food policy" },
  { tag: "judiciary", label: "Judiciary", desc: "Courts, criminal justice, civil rights" },
  { tag: "foreign-policy", label: "Foreign Policy", desc: "Diplomacy, foreign aid, sanctions" },
  { tag: "veterans", label: "Veterans", desc: "VA, veteran benefits, military families" },
  { tag: "social-security", label: "Social Security", desc: "SS, Medicare, retirement benefits" },
  { tag: "trade", label: "Trade", desc: "Tariffs, trade agreements, WTO" },
  { tag: "budget", label: "Budget", desc: "Appropriations, debt ceiling, spending" },
  { tag: "energy", label: "Energy", desc: "Oil, gas, renewables, nuclear" },
  { tag: "banking", label: "Banking", desc: "Financial regulation, Fed, CFPB" },
  { tag: "transportation", label: "Transportation", desc: "FAA, DOT, aviation, rail" },
  { tag: "labor", label: "Labor", desc: "Minimum wage, unions, OSHA, employment" },
];

export default function TopicsPage() {
  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold">Topics</h1>
        <p className="text-muted-foreground text-sm mt-1">
          Follow topics to see related bills in your feed
        </p>
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
        {TOPICS.map(({ tag, label, desc }) => (
          <div key={tag} className="bg-card border border-border rounded-lg p-4 flex items-start justify-between gap-3">
            <div>
              <div className="flex items-center gap-2 mb-1">
                <Tags className="w-3.5 h-3.5 text-muted-foreground" />
                <Link
                  href={`/bills?topic=${tag}`}
                  className="font-medium text-sm hover:text-primary transition-colors"
                >
                  {label}
                </Link>
              </div>
              <p className="text-xs text-muted-foreground">{desc}</p>
            </div>
            <FollowButton type="topic" value={tag} />
          </div>
        ))}
      </div>
    </div>
  );
}