// app/components/Navigation.tsx

"use client";

import { Briefcase, Calendar, FileText, Home as HomeIcon, LifeBuoy, Lock, Map as MapIcon } from 'lucide-react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { useEffect, useLayoutEffect, useRef } from 'react';
const useSafeLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;

const NavItem = ({ to, icon: Icon, label, className = "" }: { to: string, icon: any, label: string, className?: string }) => {
    const pathname = usePathname();
    const isActive = pathname === to;

    return (
        <Link
            href={to}
            className={`flex flex-col items-center justify-center px-4 py-2 min-w-18 transition-colors border-b-[3px] ${className} ${isActive
                ? 'border-gold text-gold bg-ebony/30'
                : 'border-transparent text-eggshell/80 hover:text-eggshell hover:bg-eggshell/5'
                }`}
        >
            <Icon size={20} className="mb-1" strokeWidth={isActive ? 2.5 : 2} />
            <span className="text-[10px] font-bold uppercase tracking-wider">{label}</span>
        </Link>
    );
};

export const Navigation = () => {
    const pathname = usePathname();
    const navRef = useRef<HTMLElement>(null);

    useSafeLayoutEffect(() => {
        window.scrollTo({ top: 0, behavior: 'instant' });
    }, [pathname]);

    return (
        <nav ref={navRef} className="flex overflow-x-auto scrollbar-hide border-t border-eggshell/10">
            <NavItem to="/" icon={HomeIcon} label="Hem" />
            <NavItem to="/schedule" icon={Calendar} label="Schema" />
            <NavItem to="/faq" icon={MapIcon} label="FAQ" />
            <NavItem to="/info" icon={Briefcase} label="Info" />
            <NavItem to="/documents" icon={FileText} label="Filer" />
            <NavItem to="/emergency" icon={LifeBuoy} label="Nödläge" className='text-emergency' />
            <NavItem to="/admin" icon={Lock} label="Admin" className="md:ml-auto" />
        </nav>
    );
};