export const commonButtonBaseClass =
  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 ring-offset-background";

export const commonButtonVariantClasses = {
  default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
  secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
  outline:
    "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
  ghost: "hover:bg-accent hover:text-accent-foreground",
  destructive:
    "bg-destructive text-destructive-foreground hover:bg-destructive/90",
  muted: "bg-muted text-muted-foreground hover:bg-muted/80",
} as const;

export const commonButtonSizeClasses = {
  default: "h-10 px-4 py-2",
  sm: "h-9 rounded-md px-3",
  lg: "h-11 rounded-md px-6 text-base",
  icon: "h-10 w-10",
} as const;

export type CommonButtonVariant = keyof typeof commonButtonVariantClasses;
export type CommonButtonSize = keyof typeof commonButtonSizeClasses;

export function getCommonButtonClasses({
  variant = "default",
  size = "default",
}: {
  variant?: CommonButtonVariant;
  size?: CommonButtonSize;
}) {
  return [
    commonButtonBaseClass,
    commonButtonVariantClasses[variant],
    commonButtonSizeClasses[size],
  ].join(" ");
}