import { cva } from "class-variance-authority";

/**
 * @example
 * const className = buttonClasses({ size: "32", shape: "rectangular", intent: "primary" });
 */
export const buttonClasses = cva(
  [
    "inline-flex justify-center items-center border-0 transition-colors duration-100 rounded-6",
    "focus-visible:ring-3 ring-B400FR",
    "cursor-pointer",
    "disabled:bg-N20A disabled:text-N60 disabled:cursor-default disabled:active:bg-N20A disabled:bg-none",
  ],
  {
    variants: {
      intent: {
        primary: [
          "outline-none",
          "bg-B400 text-N0 hover:bg-B500",
          "active:bg-B500 active:shadow-none active:bg-overlay from-N50A to-N50A",
        ],
        secondary: [
          "outline-none",
          "bg-N20A text-N700 hover:bg-N30A active:bg-N40A",
        ],
        tertiary: [
          "outline-none",
          "bg-transparent text-N700 hover:bg-N20A active:bg-N30A",
        ],
        outlined: [
          "bg-transparent text-N700 hover:bg-N20A active:bg-N30A",
          "outline outline-1 outline-N40 -outline-offset-1",
        ],
        danger: [
          "outline-none",
          "bg-R400 text-N0 hover:bg-R300 active:bg-R500",
        ],
      },
      size: {
        "24": "text-style-M100",
        "28": "text-style-M100",
        "32": "text-style-M200",
        "40": "text-style-M200",
      },
      shape: {
        square: "",
        rectangular: "",
      },
    },
    compoundVariants: [
      {
        size: "24",
        shape: "rectangular",
        class: "py-2 px-4",
      },
      {
        size: "24",
        shape: "square",
        class: "p-2",
      },
      {
        size: "28",
        shape: "rectangular",
        class: "py-4 px-10",
      },
      {
        size: "28",
        shape: "square",
        class: "p-4",
      },
      {
        size: "32",
        shape: "rectangular",
        class: "py-6 px-10",
      },
      {
        size: "32",
        shape: "square",
        class: "p-6",
      },
      {
        size: "40",
        shape: "rectangular",
        class: "p-10",
      },
      {
        size: "40",
        shape: "square",
        class: "p-10",
      },
    ],
  }
);
