import { NavLink } from 'react-router-dom';
import { LayoutDashboard, Wallet, CreditCard, MoreHorizontal } from 'lucide-react';
import { clsx } from '../../lib/utils';

const navItems = [
  { to: '/', icon: LayoutDashboard, label: 'Dashboard' },
  { to: '/buckets', icon: Wallet, label: 'Buckets' },
  { to: '/debts', icon: CreditCard, label: 'Debts' },
  { to: '/more', icon: MoreHorizontal, label: 'More' },
];

export function BottomNav() {
  return (
    <nav className="fixed bottom-0 inset-x-0 z-40 bg-surface-overlay/90 backdrop-blur border-t border-slate-800 safe-area-bottom">
      <div className="flex">
        {navItems.map(({ to, icon: Icon, label }) => (
          <NavLink
            key={to}
            to={to}
            end={to === '/'}
            className={({ isActive }) =>
              clsx(
                'flex-1 flex flex-col items-center justify-center py-2.5 gap-0.5 transition-colors',
                isActive ? 'text-accent' : 'text-slate-500 hover:text-slate-300',
              )
            }
          >
            <Icon size={22} />
            <span className="text-[10px] font-medium">{label}</span>
          </NavLink>
        ))}
      </div>
      {/* Safe area spacer for iOS/Android notch */}
      <div className="h-safe-area-inset-bottom" />
    </nav>
  );
}