"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";

import { cn } from "@/lib/utils";

const ITEMS: { href: string; label: string }[] = [
  { href: "/settings/workspace", label: "Çalışma Alanı" },
  { href: "/settings/account", label: "Profilim" },
  { href: "/settings/members", label: "Üyeler" },
  { href: "/settings/notifications", label: "Bildirimler" },
  { href: "/settings/appearance", label: "Görünüm" },
  { href: "/settings/activity", label: "Hesap Aktivitesi" },
];

export function SettingsNav() {
  const pathname = usePathname();
  return (
    <nav className="overflow-x-auto">
      <ul className="border-border flex min-w-max gap-1 border-b">
        {ITEMS.map((item) => {
          const active = pathname === item.href;
          return (
            <li key={item.href}>
              <Link
                href={item.href}
                className={cn(
                  "inline-block border-b-2 px-3 py-2 text-sm transition-colors",
                  active
                    ? "border-primary text-foreground font-medium"
                    : "text-muted-foreground hover:text-foreground border-transparent",
                )}
              >
                {item.label}
              </Link>
            </li>
          );
        })}
      </ul>
    </nav>
  );
}
