import Link from "next/link";
import type { NavCategory } from "./CategoryList";

export default function CategorySubmenu({
  category,
}: {
  category: NavCategory | null;
}) {
  if (!category || category.subCategories.length === 0) {
    return null;
  }

  return (
    <div className="bg-surface absolute w-full px-gutter bg-background py-4 shadow-xl md:px-6">
      <div className="mx-auto flex">
        {category.subCategories.map((sub) => (
          <Link
            key={sub.label}
            href={sub.href}
            className="bg-surface-container-low px-4 py-3 text-sm font-medium text-on-surface hover:bg-surface-container-high hover:text-primary transform transition-all duration-200"
          >
            {sub.label}
          </Link>
        ))}
      </div>
    </div>
  );
}