import React from 'react';

export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  icon: React.ReactNode;
  label: string;
  variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
  size?: 'sm' | 'md' | 'lg';
}

export function IconButton({
  icon,
  label,
  variant = 'ghost',
  size = 'md',
  className = '',
  ...rest
}: IconButtonProps) {
  const sizes: Record<string, string> = { sm: '32px', md: '36px', lg: '40px' };
  const dim = sizes[size];
  const bg: Record<string, string> = {
    primary: 'var(--color-primary)',
    secondary: 'var(--surface-card)',
    ghost: 'transparent',
    danger: 'var(--red-600)',
  };
  const color = variant === 'primary' ? '#fff' : variant === 'danger' ? '#fff' : 'var(--text-body)';
  const border = variant === 'secondary' ? '1px solid var(--border-strong)' : '1px solid transparent';

  return (
    <button
      aria-label={label}
      title={label}
      style={{
        display: 'inline-flex',
        alignItems: 'center',
        justifyContent: 'center',
        width: dim,
        height: dim,
        borderRadius: 'var(--radius-md)',
        border,
        background: bg[variant],
        color,
        cursor: 'pointer',
        transition: 'background var(--dur-fast)',
        flexShrink: 0,
      }}
      onMouseEnter={(e) => {
        if (variant === 'ghost') {
          (e.currentTarget as HTMLButtonElement).style.background = 'var(--surface-sunken)';
        }
      }}
      onMouseLeave={(e) => {
        if (variant === 'ghost') {
          (e.currentTarget as HTMLButtonElement).style.background = 'transparent';
        }
      }}
      className={className}
      {...rest}
    >
      {icon}
    </button>
  );
}