import React from 'react';
import { cn } from '@/lib/utils';

export type ButtonVariant = 'primary' | 'outline' | 'error';
export type ButtonSize = 'sm' | 'md' | 'lg';

export interface ButtonClassesProps {
  variant?: ButtonVariant;
  size?: ButtonSize;
  className?: string;
}

export function buttonClasses({ variant = 'primary', size = 'md', className }: ButtonClassesProps = {}) {
  const baseClasses = 'inline-flex items-center justify-center gap-2 whitespace-nowrap transition-colors';
  
  const variantClasses = {
    primary: 'btn btn-primary text-white font-bold',
    outline: 'btn bg-white/10 text-white border border-white/20 hover:bg-white/20 font-bold',
    error: 'btn btn-error text-white font-bold',
  };
  
  const sizeClasses = {
    sm: 'btn-sm text-sm',
    md: '', // default DaisyUI btn size
    lg: 'btn-lg text-lg',
  };

  return cn(
    baseClasses,
    variantClasses[variant],
    sizeClasses[size],
    className
  );
}

export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, ButtonClassesProps {
  children: React.ReactNode;
}

export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, children, ...props }, ref) => {
    return (
      <button
        ref={ref}
        className={buttonClasses({ variant, size, className })}
        {...props}
      >
        {children}
      </button>
    );
  }
);

Button.displayName = 'Button';