"use client";

import Link from "next/link";
import { useState } from "react";
import { cn } from "@/lib/utils";
import CategorySubmenu from "./CategorySubmenu";

export type SubCategory = {
  label: string;
  href: string;
};

export type NavCategory = {
  label: string;
  href: string;
  subCategories: SubCategory[];
};

export default function CategoryList({ categories }: { categories: NavCategory[] }) {
  const [activeCategory, setActiveCategory] = useState<string | null>(null);

  const activeCategoryData =
    categories.find((category) => category.label === activeCategory) ?? null;

  return (
    <div
      className="sticky top-0 z-50 bg-background border-b border-outline-variant "
      onMouseLeave={() => setActiveCategory(null)}
    >
      <div className="mx-auto flex flex-wrap w-full max-w-container-max items-center gap-4 overflow-x-auto bg-surface px-gutter py-2 scrollbar-thin scrollbar-thumb-surface-container-highest scrollbar-track-transparent">
        {categories.map((category) => (
          <Link
            key={category.label}
            href={category.href}
            onMouseEnter={() => setActiveCategory(category.label)}
            className={cn(
              "whitespace-nowrap px-1 py-2 text-sm font-medium transition-all duration-200",
              activeCategory === category.label
                ? "underline text-primary"
                : "text-on-surface-variant hover:bg-surface-container-high dark:hover:bg-surface-container-high",
            )}
          >
            {category.label}
          </Link>
        ))}
      </div>
      <div className="relative">
        <CategorySubmenu category={activeCategoryData || null} />
      </div>
    </div>
  );
}