"use client";

import { useState } from "react";

interface MobileNavProps {
	children: React.ReactNode;
	/** Accessible label for the menu button. Pass translated string from server. */
	menuLabel?: string;
	closeLabel?: string;
}

export function MobileNav({
	children,
	menuLabel = "Open menu",
	closeLabel = "Close menu",
}: MobileNavProps) {
	const [open, setOpen] = useState(false);

	return (
		<>
			<button
				type="button"
				onClick={() => setOpen(!open)}
				className="flex md:hidden items-center justify-center w-10 h-10 rounded-lg transition-colors duration-150 ml-auto"
				style={{
					color: "var(--color-navbar-text-readable, var(--color-navbar-text))",
				}}
				aria-expanded={open}
				aria-controls="mobile-menu"
				aria-label={open ? closeLabel : menuLabel}
			>
				<svg
					className="w-5 h-5"
					viewBox="0 0 24 24"
					fill="none"
					stroke="currentColor"
					strokeWidth="2"
					strokeLinecap="round"
					strokeLinejoin="round"
				>
					{open ? (
						<>
							<line x1="18" y1="6" x2="6" y2="18" />
							<line x1="6" y1="6" x2="18" y2="18" />
						</>
					) : (
						<>
							<line x1="3" y1="6" x2="21" y2="6" />
							<line x1="3" y1="12" x2="21" y2="12" />
							<line x1="3" y1="18" x2="21" y2="18" />
						</>
					)}
				</svg>
			</button>

			{open && (
				<div
					className="fixed inset-0 z-30 md:hidden"
					onClick={() => setOpen(false)}
					style={{
						backgroundColor: "rgba(0,0,0,0.45)",
						backdropFilter: "blur(6px)",
						WebkitBackdropFilter: "blur(6px)",
					}}
				/>
			)}

			<div
				id="mobile-menu"
				role="menu"
				className={`${
					open
						? "max-h-[80vh] opacity-100 translate-y-0"
						: "max-h-0 opacity-0 translate-y-[-6px] pointer-events-none md:pointer-events-auto"
				} overflow-y-auto transition-[opacity,transform] duration-200 ease-out md:!max-h-none md:!opacity-100 md:!translate-y-0 md:!overflow-visible md:flex md:items-center md:gap-x-1 w-full md:w-auto`}
				style={{ backgroundColor: "var(--color-navbar)" }}
			>
				<div
					className="flex flex-col md:flex-row md:items-center gap-y-0.5 p-2 md:p-0 rounded-xl md:rounded-none border md:border-0 shadow-lg md:shadow-none mt-1 md:mt-0"
					style={{
						borderColor:
							"color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
					}}
					onClick={() => setOpen(false)}
				>
					{children}
				</div>
			</div>
		</>
	);
}