frontend/src/components/Button.tsx

import { cn } from '../lib/utils';
import { Loader2 } from 'lucide-react';

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'primary' | 'secondary';
  isLoading?: boolean;
  icon?: React.ReactNode;
}

export function Button({
  children,
  variant = 'primary',
  isLoading = false,
  icon,
  className,
  disabled,
  ...props
}: ButtonProps) {
  return (
    <button
      className={cn(
        'flex items-center justify-center gap-2 px-6 py-3 rounded-lg font-semibold text-sm transition-all duration-200',
        'disabled:opacity-50 disabled:cursor-not-allowed shadow-card',
        variant === 'primary' && [
          'bg-nvidia-green text-white',
          'hover:bg-nvidia-green-hover hover:-translate-y-0.5 hover:shadow-card-hover',
          'active:translate-y-0',
        ],
        variant === 'secondary' && [
          'bg-white text-nvidia-green border-2 border-nvidia-green',
          'hover:bg-nvidia-green/5',
        ],
        className
      )}
      disabled={disabled || isLoading}
      {...props}
    >
      {isLoading ? (
        <Loader2 className="w-4 h-4 animate-spin" />
      ) : (
        icon
      )}
      {children}
    </button>
  );
}