import { Home, FileText, ListChecks, Plus } from "lucide-react";
import { NavLink } from "./NavLink";

/**
 * Tab bar mobile — fixed bottom, 4 entrées max.
 *
 * Pas de "Clients" : on y accède depuis une facture (cf. wireframe 4.3).
 * Pas de "Réglages" non plus : disponible via l'avatar topbar (UserMenu).
 *
 * Slot 4 = "+ Nouvelle facture" (= /factures/import) — l'action la plus
 * fréquente sur mobile (photo + drop), accessible en 1 tap depuis n'importe
 * où dans l'app.
 */
export function MobileTabBar() {
  return (
    <nav
      aria-label="Navigation principale"
      className="lg:hidden fixed bottom-0 inset-x-0 z-40 border-t border-line bg-cream-2/95 backdrop-blur-md pb-[env(safe-area-inset-bottom)]"
    >
      <div className="flex">
        <NavLink to="/" variant="tab-bar" icon={<Home size={19} />} label="Accueil" />
        <NavLink
          to="/factures"
          variant="tab-bar"
          icon={<FileText size={19} />}
          label="Factures"
        />
        <NavLink
          to="/plans"
          variant="tab-bar"
          icon={<ListChecks size={19} />}
          label="Plans"
        />
        <NavLink
          to="/factures/import"
          variant="tab-bar"
          icon={<Plus size={19} />}
          label="Nouvelle"
        />
      </div>
    </nav>
  );
}
