import type { ButtonHTMLAttributes } from 'react';
import { Icon } from './Icon';
import type { IconName } from './Icon';

interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  icon: IconName;
  dot?: boolean;
  label: string;
}

export function IconButton({ icon, dot = false, label, className = '', ...rest }: IconButtonProps) {
  return (
    <button
      title={label}
      aria-label={label}
      className={className}
      style={{
        width: 32,
        height: 32,
        borderRadius: 'var(--r-sm)',
        display: 'grid',
        placeItems: 'center',
        background: 'var(--bg-elev)',
        border: '1px solid var(--border)',
        color: 'var(--ink-muted)',
        position: 'relative',
        transition: 'all 0.1s',
        cursor: 'pointer',
        flexShrink: 0,
      }}
      {...rest}
    >
      <Icon name={icon} size={16} />
      {dot && (
        <span
          style={{
            position: 'absolute',
            top: 6,
            right: 6,
            width: 6,
            height: 6,
            borderRadius: '50%',
            background: 'var(--danger)',
            border: '1.5px solid var(--bg-elev)',
          }}
        />
      )}
    </button>
  );
}
