"use client";

import { type ReactNode, useRef } from "react";
import Image from "next/image";
import Link from "next/link";

interface MobileNavProps {
	children: ReactNode;
	menuLabel?: string;
	closeLabel?: string;
	brandLabel?: string;
}

export function MobileNav({
	children,
	menuLabel = "Open menu",
	closeLabel = "Close menu",
	brandLabel = "Atom",
}: MobileNavProps) {
	const detailsRef = useRef<HTMLDetailsElement>(null);

	const handleClick = (e: React.MouseEvent) => {
		if ((e.target as HTMLElement).closest("a") && detailsRef.current) {
			detailsRef.current.open = false;
		}
	};

	return (
		<details
			ref={detailsRef}
			onClick={handleClick}
			className="group relative md:hidden"
		>
			<summary
				className="list-none cursor-pointer flex items-center justify-center w-11 h-11 rounded-xl shrink-0
					[&::-webkit-details-marker]:hidden transition-colors duration-150
					hover:bg-[color-mix(in_srgb,var(--color-primary)_12%,transparent)]
					active:scale-[0.96]
					focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary-readable,var(--color-primary))] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-navbar)]"
				aria-label={"Menu"}
			>
				<svg
					className="w-6 h-6 details-open:hidden"
					viewBox="0 0 24 24"
					fill="none"
					stroke="currentColor"
					strokeWidth="2"
					strokeLinecap="round"
					strokeLinejoin="round"
				>
					<line x1="4" y1="7" x2="20" y2="7" />
					<line x1="4" y1="12" x2="20" y2="12" />
					<line x1="4" y1="17" x2="20" y2="17" />
				</svg>
				<svg
					className="w-6 h-6 hidden details-open:block"
					viewBox="0 0 24 24"
					fill="none"
					stroke="currentColor"
					strokeWidth="2"
					strokeLinecap="round"
					strokeLinejoin="round"
				>
					<line x1="18" y1="6" x2="6" y2="18" />
					<line x1="6" y1="6" x2="18" y2="18" />
				</svg>
			</summary>

			<div
				className="absolute left-0 top-full mt-2 w-[min(86vw,320px)] z-50 origin-top-left"
				style={{ backgroundColor: "transparent" }}
			>
				<div
					className="flex flex-col gap-y-1 p-2 rounded-2xl border shadow-xl
						bg-[var(--color-dropdown,var(--color-surface,#fff))]"
					style={{
						borderColor:
							"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
						boxShadow:
							"0 12px 40px color-mix(in srgb, rgb(0 0 0) 22%, transparent)",
					}}
				>
					<div
						className="flex items-center gap-2 px-3 py-2 mb-1 rounded-xl"
						style={{
							backgroundColor:
								"color-mix(in srgb, var(--color-primary) 12%, transparent)",
						}}
					>
						<Image
							src="/assets/images/icons/navigation/home.png"
							alt=""
							width={22}
							height={22}
							className="shrink-0"
						/>
						<span
							className="text-sm font-extrabold uppercase tracking-wide"
							style={{
								color:
									"var(--color-navbar-text-readable, var(--color-text))",
							}}
						>
							{brandLabel}
						</span>
						<span className="ml-auto text-[11px] font-semibold uppercase tracking-wider opacity-75">
							{closeLabel}
						</span>
					</div>

					{children}
				</div>
			</div>
		</details>
	);
}