import { forwardRef } from 'react';
import { cn } from '../../utils/cn';

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'primary' | 'secondary' | 'accent' | 'outline' | 'ghost' | 'danger';
  size?: 'xs' | 'sm' | 'md' | 'lg';
}

const variantStyles = {
  primary:
    'bg-[var(--color-primary)] text-white hover:bg-[var(--color-primary-hover)] active:bg-[var(--color-primary-active)]' +
    ' dark:bg-[var(--color-primary-600)] dark:hover:bg-[var(--color-primary-500)]',
  secondary:
    'bg-[var(--color-secondary)] text-[var(--color-secondary-text)] hover:bg-[var(--color-secondary-hover)] active:bg-[var(--color-secondary-active)]' +
    ' dark:bg-[var(--color-secondary-700)] dark:text-white dark:hover:bg-[var(--color-secondary-600)]',
  accent:
    'bg-[var(--color-accent)] text-[var(--color-accent-text)] hover:bg-[var(--color-accent-hover)] active:bg-[var(--color-accent-active)]' +
    ' dark:bg-[var(--color-accent-600)] dark:text-white dark:hover:bg-[var(--color-accent-500)]',
  outline:
    'border border-[var(--color-border-strong)] text-[var(--color-text-primary)] hover:bg-[var(--color-primary-subtle)] bg-transparent' +
    ' dark:border-[var(--color-primary-400)] dark:text-[var(--color-primary-300)] dark:hover:bg-[var(--color-primary-600)]/15',
  ghost:
    'text-[var(--color-text-secondary)] hover:bg-[var(--color-primary-subtle)] bg-transparent' +
    ' dark:text-[var(--color-primary-300)] dark:hover:bg-[var(--color-primary-600)]/12',
  danger:
    'bg-[var(--color-danger)] text-white hover:opacity-90' +
    ' dark:bg-red-500 dark:hover:bg-red-600 dark:hover:opacity-100',
};

const sizeStyles = {
  xs: 'h-5 px-2 text-[10px] gap-1 rounded-md',
  sm: 'h-8 px-3 text-xs gap-1.5',
  md: 'h-10 px-4 text-sm gap-2',
  lg: 'h-12 px-6 text-base gap-2',
};

const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  ({ variant = 'primary', size = 'md', className, disabled, children, ...props }, ref) => (
    <button
      ref={ref}
      disabled={disabled}
      className={cn(
        'inline-flex items-center justify-center rounded-lg font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]/30',
        'disabled:opacity-50 disabled:cursor-not-allowed',
        variantStyles[variant],
        sizeStyles[size],
        className,
      )}
      {...props}
    >
      {children}
    </button>
  ),
);
Button.displayName = 'Button';
export default Button;