import { Home, FileText, ListChecks, Settings } 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).
 */
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="/parametres"
          variant="tab-bar"
          icon={<Settings size={19} />}
          label="Réglages"
        />
      </div>
    </nav>
  );
}