"use client";

import { Button } from "@/components/ui/button";
import { Clapperboard, History, UploadCloud } from "lucide-react";
import { usePathname } from "next/navigation";

const items = [
	{
		href: "/admin/upload",
		label: "Upload",
		icon: UploadCloud,
	},
	{
		href: "/admin/upload/video",
		label: "Recent videos",
		icon: Clapperboard,
	},
	{
		href: "/admin/upload/history",
		label: "History",
		icon: History,
	},
] as const;

export function UploadNavigation() {
	const pathname = usePathname();

	return (
		<nav
			aria-label="Upload sections"
			className="grid w-full grid-cols-3 gap-2 md:w-fit"
		>
			{items.map(({ href, label, icon: Icon }) => {
				const active = pathname === href;

				return (
					<Button
						key={href}
						disabled
						variant={active ? "default" : "outline"}
					>
						<Icon data-icon="inline-start" />
						{label}
					</Button>
				);
			})}
		</nav>
	);
}