"use client";

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

const navItems = [
	{ label: "Home", href: "/" },
	{ label: "Flash Vault", href: "/flash-vault" },
	{ label: "Scrapbook", href: "/scrapbook" },
	{ label: "Music", href: "/music" },
	{ label: "Pantry", href: "/pantry" },
	{ label: "Cats", href: "/cats" },
	{ label: "Contact", href: "/contact" },
];

	type StudioNavProps = {
	className?: string;
	variant?: "light" | "dark";
};

const themes = {
	dark: {
		container: "rounded-[40px] border border-parchment/30 bg-gradient-to-r from-[#5f2210] via-[#8c3a1d] to-[#5f2210] px-6 py-6 shadow-[0_12px_35px_rgba(30,10,5,0.45)]",
		label: "text-parchment/70",
		title: "text-parchment",
		list: "text-parchment",
		active: "border-parchment bg-parchment text-terracotta shadow-[0_10px_30px_rgba(253,248,241,0.35)]",
		inactive: "border-parchment/50 text-parchment/80 hover:border-parchment hover:text-parchment",
		underline: "bg-parchment/30",
	},
	light: {
		container: "rounded-[32px] border border-brass/40 bg-parchment/80 px-6 py-6",
		label: "text-brass",
		title: "text-coffee",
		list: "text-coffee",
		active: "border-terracotta bg-terracotta text-stucco shadow-[0_8px_30px_rgba(196,106,74,0.35)]",
		inactive: "border-brass/60 text-coffee hover:border-terracotta hover:text-terracotta",
		underline: "bg-terracotta/30",
	},
};

export function StudioNav({ className = "", variant = "light" }: StudioNavProps) {
	const pathname = usePathname();
	const theme = themes[variant];

	const wrapperClasses = ["flex flex-col gap-4", theme.container, className].filter(Boolean).join(" ");

	return (
		<nav className={wrapperClasses}>
			<div>
				<p className={`text-sm uppercase tracking-[0.25em] ${theme.label}`}>GrimmTattoo</p>
				<p className={`font-display text-3xl ${theme.title}`}>Spanish Revival Studio</p>
			</div>
			<div>
				<ul className={`flex flex-wrap gap-3 text-sm font-ui uppercase tracking-wide ${theme.list}`}>
					{navItems.map((item) => {
						const isActive = pathname === item.href || (pathname?.startsWith(item.href) && item.href !== "/");
						const activeClasses = theme.active;
						const inactiveClasses = theme.inactive;
						return (
							<li key={item.label}>
								<Link
									href={item.href}
									className={`inline-flex items-center rounded-full border px-4 py-1 text-xs sm:text-sm transition-colors ${
									isActive ? activeClasses : inactiveClasses
								}`}
								aria-current={isActive ? "page" : undefined}
							>
								{item.label}
							</Link>
						</li>
					);
				})}
					</ul>
					<div className={`mt-3 h-px w-full rounded-full ${theme.underline}`} />
				</div>
		</nav>
	);
}