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

export const Button = forwardRef(({ 
  className, 
  variant = 'default', 
  size = 'default',
  ...props 
}, ref) => {
  const variants = {
    default: 'bg-slate-900 text-slate-100 hover:bg-slate-800',
    destructive: 'bg-red-600 text-white hover:bg-red-700',
    outline: 'border border-slate-700 bg-transparent hover:bg-slate-800',
    secondary: 'bg-slate-800 text-slate-100 hover:bg-slate-700',
    ghost: 'hover:bg-slate-800',
    link: 'text-slate-400 underline-offset-4 hover:underline',
  };

  const sizes = {
    default: 'h-10 px-4 py-2',
    sm: 'h-9 rounded-md px-3',
    lg: 'h-11 rounded-md px-8',
    icon: 'h-10 w-10',
  };

  return (
    <button
      className={cn(
        'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-slate-950 transition-colors',
        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-400 focus-visible:ring-offset-2',
        'disabled:pointer-events-none disabled:opacity-50',
        variants[variant],
        sizes[size],
        className
      )}
      ref={ref}
      {...props}
    />
  );
});

Button.displayName = 'Button';

