"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { LayoutGrid, List } from "lucide-react";
import { Button } from "@open-mercato/ui/primitives/button";
function ViewModeToggle({
  mode,
  onChange,
  tableLabel,
  cardsLabel,
  className,
  ariaLabel
}) {
  return /* @__PURE__ */ jsxs(
    "div",
    {
      role: "group",
      "aria-label": ariaLabel ?? "View mode",
      className: `inline-flex items-center rounded-md border border-border p-0.5 ${className ?? ""}`,
      children: [
        /* @__PURE__ */ jsxs(
          Button,
          {
            type: "button",
            variant: "ghost",
            size: "sm",
            "aria-pressed": mode === "table",
            className: `h-auto gap-1.5 px-2.5 py-1 text-xs ${mode === "table" ? "bg-foreground text-background hover:bg-foreground" : "text-muted-foreground hover:bg-muted"}`,
            onClick: () => onChange("table"),
            children: [
              /* @__PURE__ */ jsx(List, { className: "h-3.5 w-3.5", "aria-hidden": "true" }),
              tableLabel
            ]
          }
        ),
        /* @__PURE__ */ jsxs(
          Button,
          {
            type: "button",
            variant: "ghost",
            size: "sm",
            "aria-pressed": mode === "cards",
            className: `h-auto gap-1.5 px-2.5 py-1 text-xs ${mode === "cards" ? "bg-foreground text-background hover:bg-foreground" : "text-muted-foreground hover:bg-muted"}`,
            onClick: () => onChange("cards"),
            children: [
              /* @__PURE__ */ jsx(LayoutGrid, { className: "h-3.5 w-3.5", "aria-hidden": "true" }),
              cardsLabel
            ]
          }
        )
      ]
    }
  );
}
export {
  ViewModeToggle
};
//# sourceMappingURL=ViewModeToggle.js.map
