dyolink/frontend/src/components/ui/common/Button.tsx

import React from 'react';

type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'danger' | 'ghost';
type ButtonSize = 'sm' | 'md' | 'lg';

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: ButtonVariant;
  size?: ButtonSize;
  isLoading?: boolean;
  fullWidth?: boolean;
  children: React.ReactNode;
}

export const Button: React.FC<ButtonProps> = ({
  variant = 'primary',
  size = 'md',
  isLoading = false,
  fullWidth = false,
  children,
  className = '',
  disabled,
  ...props
}) => {
  const baseClasses =
    'inline-flex items-center justify-center rounded-[var(--radius-md)] font-medium transition-all duration-200 ' +
    'focus:outline-none focus:ring-2 focus:ring-primary/40 disabled:cursor-not-allowed';

  const variantClasses: Record<ButtonVariant, string> = {
    primary:
      'bg-primary text-white hover:opacity-90 disabled:opacity-60',

    secondary:
      'bg-surface-elevated text-text-primary border border-border hover:border-border-strong disabled:opacity-50',

    outline:
      'border border-border text-text-primary hover:bg-background-card/70 disabled:opacity-50',

    danger: 'bg-red-600 text-white hover:bg-red-700 disabled:opacity-50',

    ghost:
      'text-text-secondary hover:text-text-primary hover:bg-background-card/70 disabled:opacity-50',
  };

  const sizeClasses: Record<ButtonSize, string> = {
    sm: 'px-3 py-1.5 text-sm',
    md: 'px-4 py-2 text-sm',
    lg: 'px-6 py-3 text-base',
  };

  const widthClass = fullWidth ? 'w-full' : '';
  const loadingClass = isLoading ? 'opacity-70 animate-pulse pointer-events-none' : '';

  return (
    <button
      className={`${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${widthClass} ${loadingClass} ${className}`}
      disabled={disabled || isLoading}
      aria-busy={isLoading || undefined}
      {...props}
    >
      {children}
    </button>
  );
};