import React from 'react';
import { cn } from '../../utils/classNames';

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

const variantClasses: Record<ButtonVariant, string> = {
  primary: 'bg-brand-button text-white hover:bg-brand-button-hover focus-visible:ring-brand',
  secondary: 'border border-app-border bg-app-surface text-app-text hover:bg-app-surface-muted focus-visible:ring-brand',
  ghost: 'text-app-muted hover:bg-app-surface-muted hover:text-app-text focus-visible:ring-brand',
  danger: 'bg-danger text-white hover:bg-danger-strong focus-visible:ring-danger',
  success: 'bg-success text-white hover:bg-success-strong focus-visible:ring-success',
};

const sizeClasses: Record<ButtonSize, string> = {
  sm: 'h-8 px-3 text-xs',
  md: 'h-10 px-4 text-sm',
  lg: 'h-11 px-5 text-sm',
};

export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
  variant?: ButtonVariant;
  size?: ButtonSize;
};

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(({
  className,
  variant = 'secondary',
  size = 'md',
  type = 'button',
  ...props
}, ref) => (
  <button
    ref={ref}
    type={type}
    className={cn(
      'inline-flex items-center justify-center gap-2 rounded-md font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-app-bg disabled:pointer-events-none disabled:opacity-50',
      variantClasses[variant],
      sizeClasses[size],
      className,
    )}
    {...props}
  />
));

Button.displayName = 'Button';

export default Button;