import { Brain, ShoppingBag, Home, Map, UserRound, type LucideIcon } from 'lucide-react';
import type { TabName } from '@/nav/routes';

const ITEMS: { id: TabName; icon: LucideIcon; label: string }[] = [
  { id: 'home', icon: Home, label: 'خانه' },
  { id: 'map', icon: Map, label: 'نقشه' },
  { id: 'ask', icon: Brain, label: 'دستیار' },
  { id: 'subscription', icon: ShoppingBag, label: 'بسته‌ها' },
  { id: 'profile', icon: UserRound, label: 'من' },
];

export function BottomNav({ active, onChange }: { active: TabName | null; onChange: (tab: TabName) => void }) {
  return (
    <nav className="flex flex-shrink-0 items-center justify-around border-t border-line bg-white px-2 pb-safe pt-1.5">
      {ITEMS.map(({ id, icon: Icon, label }) => {
        const on = active === id;
        return (
          <button
            key={id}
            type="button"
            onClick={() => onChange(id)}
            aria-current={on ? 'page' : undefined}
            className={`flex min-w-14 flex-col items-center gap-0.5 rounded-xl px-2 pb-1.5 transition-colors ${on ? 'text-coral' : 'text-muted'}`}
          >
            <span className={`rounded-xl p-1.5 transition-colors ${on ? 'bg-[#fde9e5]' : ''}`}>
              <Icon size={20} strokeWidth={on ? 2.5 : 1.9} />
            </span>
            <span className="text-[11px] font-bold">{label}</span>
          </button>
        );
      })}
    </nav>
  );
}