import { j as t } from "../../node_modules/react/jsx-runtime.js";
import { forwardRef as m } from "react";
import { cva as b } from "../../node_modules/class-variance-authority/dist/index.js";
import { cn as p } from "../../utils/index.js";
const u = b(
  [
    "w-full",
    //full-width
    "rounded-md",
    //rounded-border
    "font-semibold",
    //font semibold
    "focus:outline-none",
    //no outline when is focus
    "disabled:cursor-not-allowed",
    "focus:ring-1",
    "focus:ring-offset-2"
  ],
  {
    variants: {
      variant: {
        spred: "",
        spwhite: "border",
        cpblue: "",
        cpwhite: "border"
      },
      size: {
        sm: "px-3 py-2 text-sm",
        md: "px-4 py-3 text-base"
      },
      colorscheme: {
        primary: "text-white"
      },
      length: {
        short: "",
        long: ""
      }
    },
    compoundVariants: [
      {
        variant: "spred",
        colorscheme: "primary",
        className: "bg-interaction-main-default hover:bg-interaction-main-hover active:bg-interaction-main-active focus:ring-interaction-main-default disabled:bg-interaction-support-disabled-subtle disabled:text-interaction-support-disabled-medium"
      },
      {
        variant: "spwhite",
        colorscheme: "primary",
        className: "text-interaction-main-default border-interaction-sub-border-default bg-surface-alt hover:bg-interaction-support-prefilled active:bg-interaction-support-disabled-subtle focus:ring-interaction-main-default focus:ring-2 disabled:text-interaction-support-disabled-medium disabled:border-interaction-support-disabled-medium"
      },
      {
        variant: "cpblue",
        colorscheme: "primary",
        className: "bg-interaction-cp-main-default hover:bg-interaction-cp-main-hover active:bg-interaction-cp-main-active focus:ring-interaction-cp-main-default disabled:bg-interaction-support-disabled-subtle disabled:text-interaction-support-disabled-medium"
      },
      {
        variant: "cpwhite",
        colorscheme: "primary",
        className: "text-interaction-cp-main-default border-interaction-sub-border-default bg-surface-alt hover:bg-interaction-support-prefilled active:bg-interaction-support-disabled-subtle focus:ring-interaction-cp-main-default focus:ring-2 disabled:text-interaction-support-disabled-medium disabled:border-interaction-support-disabled-medium"
      }
    ],
    defaultVariants: {
      variant: "spred",
      size: "md",
      colorscheme: "primary",
      length: "long"
    }
  }
), v = m(
  ({ variant: e, size: r, colorscheme: n, className: s, ...i }, c) => {
    const d = {
      long: { md: "md", sm: "sm" },
      short: { md: "md", sm: "md" }
    }, a = {
      cpwhite: { product: "corppass", color: "white" },
      cpblue: { product: "corppass", color: "blue" },
      spwhite: { product: "singpass", color: "white" },
      spred: { product: "singpass", color: "red" }
    }, o = i.length ?? "long", l = i.disabled ? "/" + a[e || "spred"].product + "-logo-disabled-" + d[o][r || "md"] + "-" + o + ".svg" : "/" + a[e || "spred"].product + "-logo-" + a[e || "spred"].color + "-" + d[o][r || "md"] + "-" + o + ".svg";
    return i.length === "short" ? /* @__PURE__ */ t.jsx(
      "button",
      {
        ref: c,
        className: p(
          "flex gap-1",
          u({ variant: e, size: r, colorscheme: n, className: s })
        ),
        ...i,
        children: /* @__PURE__ */ t.jsxs("div", { className: "flex-col text-left", children: [
          /* @__PURE__ */ t.jsx("span", { children: "Log in" }),
          /* @__PURE__ */ t.jsx("img", { src: l, alt: "icon" })
        ] })
      }
    ) : /* @__PURE__ */ t.jsxs(
      "button",
      {
        ref: c,
        className: p(
          "flex gap-1",
          u({ variant: e, size: r, colorscheme: n, className: s })
        ),
        ...i,
        children: [
          "Log in with ",
          /* @__PURE__ */ t.jsx("img", { src: l, alt: "icon" })
        ]
      }
    );
  }
);
export {
  v as SPCPButton
};
