import React, { FC, MouseEventHandler } from 'react';

/**
 * Props for the SidebarActionButton component.
 */
export interface SidebarActionButtonProps {
  /**
   * Emoji or icon string rendered inside the circular button.
   */
  icon: string;
  /**
   * Short title shown in the custom tooltip.
   */
  label: string;
  /**
   * Optional descriptive copy for the tooltip body.
   */
  description?: string;
  /**
   * Optional secondary hint rendered as a footer line inside the tooltip.
   * Useful for surfacing keyboard shortcuts or pro tips.
   */
  shortcutHint?: string;
  /**
   * Optional numeric badge rendered on the button.
   */
  badge?: string | number;
  /**
   * Handler executed when the button is clicked.
   */
  onClick: MouseEventHandler<HTMLButtonElement>;
  /**
   * ARIA label override for assistive technologies.
   */
  ariaLabel?: string;
  /**
   * Marks the button as active to provide visual emphasis.
   */
  isActive?: boolean;
  /**
   * Disables the button when true.
   */
  disabled?: boolean;
}

/**
 * Circular sidebar icon button with a custom tooltip that surfaces additional
 * context such as descriptions and keyboard hints. Designed to replace native
 * title attributes for improved styling and accessibility.
 *
 * @param icon Emoji or glyph to render inside the button.
 * @param label Tooltip title describing the action.
 * @param description Optional extended tooltip copy.
 * @param badge Optional badge content rendered on the button.
 * @param onClick Click handler invoked on activation.
 * @param ariaLabel Accessible label override.
 * @param isActive Highlights the button when the related panel is open.
 * @param disabled Disables the button when true.
 * @returns Stylised icon button with hover tooltip support.
 */
const SidebarActionButton: FC<SidebarActionButtonProps> = ({
  icon,
  label,
  description,
  shortcutHint,
  badge,
  onClick,
  ariaLabel,
  isActive = false,
  disabled = false,
}) => (
  <div className="sidebar-action-button">
    <button
      type="button"
      className={`sidebar-icon-button${isActive ? ' active' : ''}`}
      onClick={onClick}
      aria-label={ariaLabel ?? label}
      disabled={disabled}
    >
      <span aria-hidden="true">{icon}</span>
      {badge && <span className="sidebar-action-badge">{badge}</span>}
    </button>
    <div className="sidebar-action-tooltip" role="tooltip">
      <p className="sidebar-action-tooltip-title">{label}</p>
      {description && <p className="sidebar-action-tooltip-body">{description}</p>}
      {shortcutHint && (
        <p className="sidebar-action-tooltip-shortcut">{shortcutHint}</p>
      )}
    </div>
  </div>
);

export default SidebarActionButton;