pagodera/components/Header.tsx

"use client";

import {
  NavigationMenu,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  navigationMenuTriggerStyle,
} from "@/components/ui/navigation-menu";
import { WordRotate } from "@/components/ui/word-rotate";
import { ThemeToggle } from "./theme-toggle";
import { LanguageSwitcher } from "./language-switcher";
import { MobileMenu } from "./mobile-menu";
import { cn } from "@/lib/utils";
import { useTranslations, useLocale } from "next-intl";
import Link from "next/link";

export default function Header() {
  const t = useTranslations("header.nav");
  const locale = useLocale();

  const links = [
    { href: `/${locale}/library`, label: "Library" },
    { href: `/${locale}/market`, label: t("market") },
    { href: `/${locale}/sobre`, label: t("about") },
    { href: `/${locale}/precos`, label: t("prices") },
    { href: `/${locale}/apoiar`, label: t("support"), highlight: true },
  ];

  return (
    <header className="sticky top-0 z-50 w-full border-b bg-background/60 backdrop-blur supports-backdrop-filter:bg-background/60">
      <div className="mx-auto flex h-16 w-full max-w-6xl items-center justify-between px-4">
        {/* Logo */}
        <div className="flex items-center gap-2">
          <Link href="/">
            <WordRotate
              words={["Pagodera", "Tibia Trade"]}
              className="text-lg font-semibold tracking-tight hover:text-primary transition-colors"
            />
          </Link>
        </div>

        {/* Desktop Navigation */}
        <NavigationMenu className="hidden md:flex">
          <NavigationMenuList>
            {links.map(({ href, label, highlight }) => (
              <NavigationMenuItem key={href}>
                <NavigationMenuLink asChild>
                  <Link
                    href={href}
                    className={cn(
                      navigationMenuTriggerStyle(),
                      "bg-transparent",
                      highlight &&
                        "bg-primary text-primary-foreground hover:bg-primary/90"
                    )}
                  >
                    {label}
                  </Link>
                </NavigationMenuLink>
              </NavigationMenuItem>
            ))}
          </NavigationMenuList>
        </NavigationMenu>

        {/* Desktop Controls */}
        <div className="hidden md:flex items-center gap-2">
          <ThemeToggle />
          <LanguageSwitcher />
        </div>

        {/* Mobile Menu */}
        <div className="md:hidden">
          <MobileMenu links={links} />
        </div>
      </div>
    </header>
  );
}