'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { List, MapPin, Settings } from 'lucide-react';
import { cn } from '@/lib/utils';

const navItems = [
  { href: '/', label: 'Collections', icon: List },
  { href: '/map/', label: 'Map', icon: MapPin },
  { href: '/settings/', label: 'Settings', icon: Settings },
];

export default function BottomNav() {
  const pathname = usePathname();

  return (
    <nav className="fixed bottom-0 left-0 right-0 z-50 bg-[#e6e5e0]/95 dark:bg-[#181710]/95 backdrop-blur-lg border-t border-[rgba(38,37,30,0.1)] dark:border-[rgba(242,241,237,0.08)] safe-bottom">
      <div className="brand-accent-top" aria-hidden="true" />
      <div className="flex justify-around items-center h-16 max-w-lg mx-auto">
        {navItems.map((item) => {
          const Icon = item.icon;
          const isActive = pathname === item.href || (item.href !== '/' && pathname.startsWith(item.href));

          return (
            <Link
              key={item.href}
              href={item.href}
              aria-current={isActive ? 'page' : undefined}
              className={cn(
                'flex flex-col items-center justify-center flex-1 h-full relative transition-all duration-200',
                'touch-manipulation active:scale-95',
                isActive ? 'text-[#26251e]' : 'text-[rgba(38,37,30,0.55)]'
              )}
            >
              {isActive && (
                <span className="absolute top-0 left-1/2 -translate-x-1/2 w-8 h-0.5 bg-[#f54e00] rounded-full" />
              )}
              <Icon
                size={22}
                strokeWidth={isActive ? 2.5 : 1.8}
                className={cn(
                  'transition-all duration-200',
                  isActive && 'drop-shadow-sm scale-110'
                )}
              />
              <span
                className={cn(
                  'text-[10px] mt-0.5 font-semibold transition-all duration-200',
                  isActive ? 'text-[#26251e]' : 'text-[rgba(38,37,30,0.55)]'
                )}
              >
                {item.label}
              </span>
            </Link>
          );
        })}
      </div>
    </nav>
  );
}