"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { Clock, LayoutGrid, List } from "lucide-react";
import {
  SegmentedControl,
  SegmentedControlItem
} from "@open-mercato/ui/primitives/segmented-control";
import { Tabs, TabsList, TabsTrigger } from "@open-mercato/ui/primitives/tabs";
import { useT } from "@open-mercato/shared/lib/i18n/context";
function TabCount({ value }) {
  return /* @__PURE__ */ jsxs("span", { className: "text-xs font-medium text-muted-foreground", children: [
    "(",
    value,
    ")"
  ] });
}
function CalendarTabs({ tab, counts, view, onTabChange, onViewChange }) {
  const t = useT();
  return /* @__PURE__ */ jsx(
    Tabs,
    {
      value: tab,
      onValueChange: (value) => onTabChange(value),
      variant: "underline",
      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-stretch justify-between gap-x-3 gap-y-2", children: [
        /* @__PURE__ */ jsx("div", { className: "min-w-0 max-w-full overflow-x-auto", children: /* @__PURE__ */ jsxs(TabsList, { className: "shrink-0", children: [
          /* @__PURE__ */ jsx(TabsTrigger, { value: "all", leading: /* @__PURE__ */ jsx(LayoutGrid, { className: "size-4" }), children: t("customers.calendar.tabs.all", "All Scheduled") }),
          /* @__PURE__ */ jsxs(TabsTrigger, { value: "meetings", leading: /* @__PURE__ */ jsx(List, { className: "size-4" }), children: [
            t("customers.calendar.tabs.meetings", "Meetings"),
            " ",
            /* @__PURE__ */ jsx(TabCount, { value: counts.meetings })
          ] }),
          /* @__PURE__ */ jsxs(TabsTrigger, { value: "events", leading: /* @__PURE__ */ jsx(Clock, { className: "size-4" }), children: [
            t("customers.calendar.tabs.events", "Events"),
            " ",
            /* @__PURE__ */ jsx(TabCount, { value: counts.events })
          ] })
        ] }) }),
        /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 items-center justify-end border-b border-input", children: /* @__PURE__ */ jsxs(
          SegmentedControl,
          {
            value: view,
            onValueChange: (value) => onViewChange(value),
            "aria-label": t("customers.calendar.views.label", "Calendar view"),
            children: [
              /* @__PURE__ */ jsx(SegmentedControlItem, { value: "day", children: t("customers.calendar.views.day", "Day") }),
              /* @__PURE__ */ jsx(SegmentedControlItem, { value: "week", children: t("customers.calendar.views.week", "Week") }),
              /* @__PURE__ */ jsx(SegmentedControlItem, { value: "month", children: t("customers.calendar.views.month", "Month") }),
              /* @__PURE__ */ jsx(SegmentedControlItem, { value: "agenda", children: t("customers.calendar.views.agenda", "Agenda") })
            ]
          }
        ) })
      ] })
    }
  );
}
export {
  CalendarTabs
};
//# sourceMappingURL=CalendarTabs.js.map
