import { j as e } from "../../node_modules/react/jsx-runtime.js";
import { forwardRef as b } from "react";
import { cva as m } from "../../node_modules/class-variance-authority/dist/index.js";
import { cn as u } from "../../utils/index.js";
const p = m(
  [
    "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",
    "flex flex-row items-center"
  ],
  {
    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-red-60 text-brand-white hover:bg-red-70 active:bg-red-80 focus:ring-red-60 disabled:bg-interaction-support-disabled-subtle disabled:text-interaction-support-disabled-medium"
      },
      {
        variant: "spwhite",
        colorscheme: "primary",
        className: "text-red-60 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-blue-60 text-brand-white hover:bg-blue-70 active:bg-blue-80 focus:ring-blue-60 disabled:bg-interaction-support-disabled-subtle disabled:text-interaction-support-disabled-medium"
      },
      {
        variant: "cpwhite",
        colorscheme: "primary",
        className: "text-blue-60 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 = b(
  ({ variant: t, size: o, colorscheme: d, className: a, ...r }, n) => {
    const l = {
      long: { md: "md", sm: "sm" },
      short: { md: "md", sm: "md" }
    }, i = {
      cpwhite: { product: "corppass", color: "white" },
      cpblue: { product: "corppass", color: "blue" },
      spwhite: { product: "singpass", color: "white" },
      spred: { product: "singpass", color: "red" }
    }, s = r.length ?? "long", c = r.disabled ? "/" + i[t || "spred"].product + "-logo-disabled-" + l[s][o || "md"] + "-" + s + ".svg" : "/" + i[t || "spred"].product + "-logo-" + i[t || "spred"].color + "-" + l[s][o || "md"] + "-" + s + ".svg";
    return r.length === "short" ? /* @__PURE__ */ e.jsx(
      "button",
      {
        ref: n,
        className: u(
          "flex gap-1",
          p({ variant: t, size: o, colorscheme: d, className: a })
        ),
        ...r,
        children: /* @__PURE__ */ e.jsxs("div", { className: "flex-col text-left", children: [
          /* @__PURE__ */ e.jsx("span", { children: "Log in" }),
          /* @__PURE__ */ e.jsx("img", { src: c, alt: "icon" })
        ] })
      }
    ) : /* @__PURE__ */ e.jsxs(
      "button",
      {
        ref: n,
        className: u(
          "flex gap-1",
          p({ variant: t, size: o, colorscheme: d, className: a })
        ),
        ...r,
        children: [
          "Log in with ",
          /* @__PURE__ */ e.jsx("img", { src: c, alt: "icon" })
        ]
      }
    );
  }
);
export {
  v as SPCPButton
};
