import { jsxs, Fragment, jsx } from "react/jsx-runtime";
import "react";
import { c as cn } from "../../cn-FAaWYZ6x.js";
import { NavLink } from "../link/link.js";
const TabBar = ({ items, className }) => {
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx("div", { className: "h-[56px]", "data-component": "tab-bar" }),
    /* @__PURE__ */ jsx(
      "nav",
      {
        className: cn(
          "main-nav",
          // Prevent transitions
          // Mobile only, fixed positioning - variant-aware responsive behavior
          "fixed bottom-0 left-0 right-0 z-50",
          // Visual styling
          "bg-navigation  border-default",
          // Height for touch targets
          // "h-16",
          className
        ),
        "data-component": "tab-bar",
        children: /* @__PURE__ */ jsx("div", { className: "h-full flex justify-around items-center", children: items.map((item, i) => /* @__PURE__ */ jsxs(
          NavLink,
          {
            href: item.href,
            className: ({ isActive }) => cn(
              // Base styles - column layout for icon and label
              "flex flex-col items-center justify-center gap-1",
              // Touch target size
              "min-w-[64px] px-3 py-2",
              // Text styles
              "text-xs font-medium",
              // Transition for color changes
              "transition-colors",
              // Active state
              isActive && "text-accent",
              // Inactive state
              !isActive && "text-subtle"
            ),
            children: [
              /* @__PURE__ */ jsx("span", { className: "[&>svg]:h-5 [&>svg]:w-5", children: item.icon }),
              /* @__PURE__ */ jsx("span", { children: item.label })
            ]
          },
          item.href ?? i
        )) })
      }
    )
  ] });
};
export {
  TabBar
};
