'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { cn } from '@/lib/utils';
import { ScrollArea } from '@/components/ui/scroll-area';
import { sidebarNavItems } from '@/constant/sidebar-nav';

interface SidebarNavProps {
	open: boolean;
}

export function SidebarNav({ open }: SidebarNavProps) {
	const pathname = usePathname();

	return (
		<div
			className={cn(
				'fixed inset-y-0 left-0 z-20 flex flex-col w-64 pt-16',
				'bg-sidebar text-sidebar-foreground border-r border-sidebar-border shadow-sm',
				'transition-transform duration-300 ease-in-out',
				open
					? 'translate-x-0'
					: '-translate-x-full lg:translate-x-0 lg:w-0 lg:opacity-0'
			)}
		>
			<ScrollArea className="flex-1 px-3 py-4">
				<div className="space-y-1">
					{sidebarNavItems.map((section) => {
						const isActive = pathname === section.href;

						return (
							<Link
								key={section.href}
								href={section.href}
								className={cn(
									'flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors',
									isActive
										? 'bg-sidebar-accent text-sidebar-accent-foreground'
										: 'text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground'
								)}
							>
								<section.icon className="w-5 h-5" />
								<span>{section.title}</span>
							</Link>
						);
					})}
				</div>
			</ScrollArea>

			<div className="p-4 border-t border-sidebar-border">
				<p className="text-xs text-sidebar-foreground/70">
					Portfolio Admin Dashboard v1.0
				</p>
			</div>
		</div>
	);
}