import { jsxs, jsx, Fragment } from "react/jsx-runtime";
import { forwardRef } from "react";
import { cn } from "../utils/cn.js";
const Spinner = () => /* @__PURE__ */ jsxs(
  "svg",
  {
    "data-testid": "button-spinner",
    className: "w-4 h-4 animate-spin",
    xmlns: "http://www.w3.org/2000/svg",
    fill: "none",
    viewBox: "0 0 24 24",
    children: [
      /* @__PURE__ */ jsx(
        "circle",
        {
          className: "opacity-25",
          cx: "12",
          cy: "12",
          r: "10",
          stroke: "currentColor",
          strokeWidth: "4"
        }
      ),
      /* @__PURE__ */ jsx(
        "path",
        {
          className: "opacity-75",
          fill: "currentColor",
          d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
        }
      )
    ]
  }
);
const Button = forwardRef(
  ({
    className,
    variant = "default",
    mood,
    size = "md",
    leftIcon,
    rightIcon,
    icon,
    loadingText,
    onClick,
    disabled,
    children,
    isLoading,
    type = "button",
    ...props
  }, ref) => {
    const baseStyles = "inline-flex items-center justify-center gap-1 whitespace-nowrap text-base font-semibold leading-none transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none cursor-pointer";
    const variants = {
      default: mood === "destructive" ? "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive" : "bg-action text-action-text hover:bg-action/90 focus-visible:ring-ring",
      secondary: mood === "destructive" ? "border border-border-dark bg-transparent text-destructive hover:bg-muted/50 focus-visible:ring-destructive" : "border border-border-dark bg-transparent text-primary hover:bg-muted/50 focus-visible:ring-ring",
      ghost: mood === "destructive" ? "bg-transparent text-destructive hover:bg-destructive/10 focus-visible:ring-destructive" : "bg-transparent text-primary hover:bg-muted focus-visible:ring-ring"
    };
    const sizes = icon ? {
      sm: "w-8 h-8 p-0",
      md: "w-9 h-9 p-0",
      lg: "w-11 h-11 p-0",
      xl: "w-14 h-14 p-0"
    } : {
      sm: "h-8 px-3 rounded-lg",
      md: "h-9 px-3 rounded-lg",
      lg: "h-11 px-5 rounded-lg",
      xl: "h-14 px-6 rounded-lg"
    };
    const isDisabled = disabled || isLoading;
    return /* @__PURE__ */ jsxs(
      "button",
      {
        ref,
        type,
        className: cn(
          baseStyles,
          variants[variant],
          sizes[size],
          "rounded-lg  ",
          className
        ),
        disabled: isDisabled,
        onClick,
        "aria-busy": isLoading,
        ...props,
        children: [
          isLoading && /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading..." }),
          icon ? isLoading ? /* @__PURE__ */ jsx(Spinner, {}) : /* @__PURE__ */ jsx(
            "span",
            {
              className: cn(
                "flex-shrink-0",
                variant === "secondary" || variant === "ghost" ? "text-secondary" : ""
              ),
              children: icon
            }
          ) : /* @__PURE__ */ jsxs(Fragment, { children: [
            !isLoading && leftIcon && /* @__PURE__ */ jsx(
              "span",
              {
                className: cn(
                  "flex-shrink-0",
                  variant === "secondary" || variant === "ghost" ? "text-secondary" : ""
                ),
                children: leftIcon
              }
            ),
            isLoading && !loadingText && /* @__PURE__ */ jsx(Spinner, {}),
            isLoading && loadingText || !isLoading && children ? /* @__PURE__ */ jsx("span", { className: "px-1 whitespace-nowrap flex items-center", children: isLoading && loadingText ? loadingText : children }) : null,
            !isLoading && rightIcon && /* @__PURE__ */ jsx(
              "span",
              {
                className: cn(
                  "flex-shrink-0",
                  variant === "secondary" || variant === "ghost" ? "text-secondary" : ""
                ),
                children: rightIcon
              }
            )
          ] })
        ]
      }
    );
  }
);
Button.displayName = "Button";
export {
  Button
};
