"use client";

import { useState } from "react";

const ANCHORS = [
  { id: "featured", label: "Featured", count: "8" },
  { id: "trending", label: "Trending", count: "12" },
  { id: "by-type", label: "By content type", count: "4" },
  { id: "followed", label: "Most followed", count: "9" },
  { id: "az", label: "A–Z directory", count: "184" },
  { id: "tags", label: "Tag cloud", count: "62" },
];

export default function TopicsAnchors() {
  const [activeId, setActiveId] = useState("featured");

  function handleClick(id: string) {
    setActiveId(id);
    document.getElementById(id)?.scrollIntoView({ behavior: "smooth" });
  }

  return (
    <nav className="topics-anchors">
      <div className="wrap topics-anchors-row">
        {ANCHORS.map((a) => (
          <button
            key={a.id}
            className={`topics-anchor${activeId === a.id ? " active" : ""}`}
            onClick={() => handleClick(a.id)}
          >
            {a.label} <span className="ct">{a.count}</span>
          </button>
        ))}
      </div>
    </nav>
  );
}