// @design-system: primitives/Button
import { cva } from 'class-variance-authority';

export const buttonVariants = cva(
  [
    'inline-flex items-center justify-center gap-2',
    'rounded-lg font-bold',
    'border border-transparent',
    'transition-[background-color,background-image,border-color,box-shadow,color,transform]',
    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
    'disabled:pointer-events-none disabled:opacity-50',
    'select-none',
    'shadow-[var(--fx-panel-shadow-rest)]',
  ],
  {
    variants: {
      variant: {
        primary: [
          'bg-brand-primary-700 bg-[image:var(--gradient-action)] text-white',
          'shadow-[var(--fx-button-primary-shadow)]',
          'hover:shadow-[var(--fx-button-primary-shadow-hover)]',
          'active:translate-y-px',
          'focus-visible:ring-brand-primary-500',
        ],
        secondary: [
          'bg-[var(--fx-button-secondary-bg)] text-brand-primary-800',
          'border-brand-primary-200',
          'shadow-[var(--fx-button-secondary-shadow)]',
          'hover:shadow-[var(--fx-button-secondary-shadow-hover)]',
          'active:bg-brand-primary-100',
          'focus-visible:ring-brand-primary-400',
        ],
        ghost: [
          'bg-transparent text-brand-primary-700',
          'shadow-none',
          'hover:bg-[var(--fx-button-ghost-bg-hover)]',
          'active:bg-[var(--fx-button-ghost-bg-active)]',
          'focus-visible:ring-brand-primary-500',
        ],
        'ghost-inverted': [
          'bg-transparent text-white/90',
          'border-white/15 shadow-none',
          'hover:bg-white/15',
          'active:bg-white/25',
          'focus-visible:ring-white',
        ],
        danger: [
          'bg-[var(--fx-button-danger-bg)] text-danger-700',
          'border border-danger-300',
          'shadow-[var(--fx-button-danger-shadow)]',
          'hover:bg-danger-50',
          'active:bg-danger-100',
          'focus-visible:ring-danger-400',
        ],
      },
      size: {
        sm: 'min-h-[var(--touch-target-min)] px-3 py-2 text-sm',
        md: 'min-h-[var(--touch-target-min)] px-4 py-2.5 text-base',
        lg: 'h-12 px-6 py-3 text-lg',
      },
    },
    defaultVariants: {
      variant: 'primary',
      size: 'md',
    },
  },
);