'use client';

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

export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'default' | 'primary' | 'ghost' | 'danger';
  size?: 'md' | 'sm';
}

export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant = 'default', size = 'md', ...props }, ref) => (
    <button
      ref={ref}
      className={cn(
        'inline-flex items-center justify-center gap-2 font-medium border cursor-pointer disabled:opacity-60 disabled:cursor-wait',
        size === 'sm' ? 'px-2.5 py-1 text-[13px]' : 'px-3.5 py-1.5 text-sm',
        'rounded-[var(--r)]',
        variant === 'default' && 'bg-surface border-line text-text hover:bg-surface-2',
        variant === 'primary' &&
          'bg-accent border-accent text-on-accent hover:bg-accent-hover',
        variant === 'ghost' && 'border-transparent bg-transparent text-muted hover:text-text',
        variant === 'danger' && 'bg-surface border-line text-danger hover:bg-danger-soft',
        className,
      )}
      {...props}
    />
  ),
);
Button.displayName = 'Button';