'use client';

import { useState } from 'react';
import Image from 'next/image';
import Link from 'next/link';
import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline';
import Logo from '@/public/borb.png';
import { nav, site } from '@/lib/site';

const Header = () => {
	const [open, setOpen] = useState(false);
	const close = () => setOpen(false);

	return (
		<header className="sticky top-0 z-50 border-b border-white/10 bg-obsidian/45 backdrop-blur-md">
			<div className="container-page flex h-16 items-center justify-between">
				<Link
					href="/"
					onClick={close}
					className="flex items-center gap-2.5 text-sm font-medium tracking-tight text-ink"
					aria-label="Home"
				>
					<Image
						src={Logo}
						alt=""
						width={40}
						height={40}
						loading="eager"
						className="h-9 w-9 object-contain"
					/>
					<span>{site.name}</span>
				</Link>

				<nav
					aria-label="Primary"
					className="hidden items-center gap-7 text-sm md:flex"
				>
					{nav.map((item) => (
						<a
							key={item.href}
							href={item.href}
							className="text-ink/75 transition-colors hover:text-ink"
						>
							{item.label}
						</a>
					))}
					<a
						href={site.gitlab}
						target="_blank"
						rel="noreferrer"
						className="border-l border-white/15 pl-6 text-aurora transition-colors hover:text-crest"
					>
						GitLab ↗
					</a>
				</nav>

				<button
					type="button"
					className="grid h-9 w-9 place-items-center border border-white/15 text-ink hover:border-aurora md:hidden"
					aria-expanded={open}
					aria-controls="mobile-nav"
					aria-label={open ? 'Close menu' : 'Open menu'}
					onClick={() => setOpen((v) => !v)}
				>
					{open ? (
						<XMarkIcon className="h-4 w-4" aria-hidden />
					) : (
						<Bars3Icon className="h-4 w-4" aria-hidden />
					)}
				</button>
			</div>

			{open && (
				<nav
					id="mobile-nav"
					aria-label="Mobile"
					className="flex flex-col border-t border-white/10 bg-obsidian/90 backdrop-blur-md md:hidden"
				>
					{nav.map((item) => (
						<a
							key={item.href}
							href={item.href}
							onClick={close}
							className="border-b border-white/10 px-6 py-3.5 text-sm text-ink/80 hover:bg-white/5 hover:text-ink"
						>
							{item.label}
						</a>
					))}
					<a
						href={site.gitlab}
						target="_blank"
						rel="noreferrer"
						className="px-6 py-3.5 text-sm text-aurora hover:bg-white/5"
					>
						GitLab ↗
					</a>
				</nav>
			)}
		</header>
	);
};

export default Header;