"use client";
import * as React from 'react';
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
import { jsx, jsxs } from 'react/jsx-runtime';

var __defProp = Object.defineProperty;
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
function cn(...inputs) {
  return twMerge(clsx(inputs));
}
__name(cn, "cn");
var MenuDock = React.forwardRef(
  ({ className, items, orientation = "horizontal", ...props }, ref) => {
    return /* @__PURE__ */ jsx(
      "div",
      {
        ref,
        className: cn(
          "flex gap-2 rounded-full border bg-background/95 p-2 shadow-lg backdrop-blur",
          orientation === "vertical" ? "flex-col" : "flex-row",
          className
        ),
        ...props,
        children: items.map((item, index) => /* @__PURE__ */ jsxs(
          "button",
          {
            onClick: item.onClick,
            className: cn(
              "group relative flex items-center justify-center rounded-full p-3 transition-colors hover:bg-accent",
              item.active && "bg-primary text-primary-foreground hover:bg-primary/90"
            ),
            title: item.label,
            children: [
              item.icon,
              /* @__PURE__ */ jsx("span", { className: "sr-only", children: item.label }),
              /* @__PURE__ */ jsx("span", { className: "absolute -top-8 left-1/2 -translate-x-1/2 whitespace-nowrap rounded bg-popover px-2 py-1 text-xs text-popover-foreground opacity-0 transition-opacity group-hover:opacity-100", children: item.label })
            ]
          },
          index
        ))
      }
    );
  }
);
MenuDock.displayName = "MenuDock";

export { MenuDock };
