import { cva } from "../lib/cva";
import { getMotionRecipeClassNames } from "../lib/motion";

export const buttonVariants = cva(
  [
    "relative isolate inline-flex shrink-0 items-center justify-center gap-2 overflow-hidden whitespace-nowrap",
    "rounded-[var(--ui-button-radius)] [border-width:var(--ui-button-border-width)] font-medium select-none",
    "[transition-duration:var(--ui-button-transition-duration,var(--dur-fast))]",
    "outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-ring)]",
    "focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-background)]",
    "disabled:pointer-events-none disabled:opacity-55",
    getMotionRecipeClassNames("pressable", "ring")
  ],
  {
    variants: {
      size: {
        sm: "h-9 px-3 text-sm",
        md: "h-10 px-4 text-sm",
        lg: "h-12 px-5 text-base",
        icon: "h-10 w-10 text-sm"
      },
      variant: {
        primary:
          "border-[var(--ui-button-primary-border)] bg-[var(--ui-button-primary-bg)] text-[var(--ui-button-primary-fg)] shadow-[var(--ui-button-primary-shadow)] hover:bg-[var(--ui-button-primary-hover-bg)]",
        secondary:
          "border-[var(--ui-button-secondary-border)] bg-[var(--ui-button-secondary-bg)] text-[var(--ui-button-secondary-fg)] shadow-[var(--ui-button-secondary-shadow)] hover:bg-[var(--ui-button-secondary-hover-bg)]",
        ghost:
          "border-[var(--ui-button-ghost-border)] bg-[var(--ui-button-ghost-bg)] text-[var(--ui-button-ghost-fg)] shadow-[var(--ui-button-ghost-shadow)] hover:bg-[var(--ui-button-ghost-hover-bg)]",
        subtle:
          "border-[var(--ui-button-subtle-border)] bg-[var(--ui-button-subtle-bg)] text-[var(--ui-button-subtle-fg)] shadow-[var(--ui-button-subtle-shadow)] hover:bg-[var(--ui-button-subtle-hover-bg)]",
        destructive:
          "border-[var(--ui-button-destructive-border)] bg-[var(--ui-button-destructive-bg)] text-[var(--ui-button-destructive-fg)] shadow-[var(--ui-button-destructive-shadow)] hover:bg-[var(--ui-button-destructive-hover-bg)]"
      },
      loading: {
        false: "",
        true: "cursor-wait"
      }
    },
    defaultVariants: {
      size: "md",
      variant: "primary"
    }
  }
);