"use client";

import { useRef } from "react";
import { STATIC_CATEGORIES, StaticCategory } from "@/data/static";
import { useTranslation } from "@/i18n";

// ── Types ──────────────────────────────────────────────────────────────────────

interface StaticCategoryTabsProps {
  activeId: number;
  onChange: (id: number, name: string) => void;
}

// ── Component ──────────────────────────────────────────────────────────────────

export function StaticCategoryTabs({ activeId, onChange }: StaticCategoryTabsProps) {
  const { t } = useTranslation();
  const scrollRef = useRef<HTMLDivElement>(null);

  return (
    <div className="relative">
      {/* Left fade */}
      <div
        className="absolute left-0 top-0 bottom-0 w-6 pointer-events-none z-10"
        style={{
          background: "linear-gradient(90deg, var(--bg) 0%, transparent 100%)",
        }}
      />
      {/* Right fade */}
      <div
        className="absolute right-0 top-0 bottom-0 w-6 pointer-events-none z-10"
        style={{
          background: "linear-gradient(270deg, var(--bg) 0%, transparent 100%)",
        }}
      />

      <div
        ref={scrollRef}
        className="flex gap-2 overflow-x-auto scrollbar-hide px-1 py-1"
        role="tablist"
        aria-label={t("static_categories_label")}
      >
        {STATIC_CATEGORIES.map((cat: StaticCategory) => {
          const isActive = cat.id === activeId;
          return (
            <button
              key={cat.id}
              role="tab"
              aria-selected={isActive}
              onClick={() => onChange(cat.id, cat.name)}
              className="shrink-0 px-3.5 py-1.5 rounded-full text-xs font-medium transition-all duration-150 whitespace-nowrap"
              style={
                isActive
                  ? {
                      background: "var(--accent)",
                      color: "#fff",
                      boxShadow: "0 2px 8px rgba(var(--accent-rgb),0.35)",
                    }
                  : {
                      background: "var(--card)",
                      color: "#aaa",
                      border: "1px solid var(--border)",
                    }
              }
            >
              {cat.name}
            </button>
          );
        })}
      </div>
    </div>
  );
}