"use client";

import type { LucideIcon } from "lucide-react";
import React, { type ReactNode } from "react";

/**
 * Compact editor button with a lucide icon. `label` is always the accessible
 * name; it is also the tooltip unless a more specific `title` is given.
 * With `showLabel` the label (or `children`) is rendered next to the icon.
 */
export function IconButton({
  icon: Icon,
  label,
  title,
  onClick,
  disabled,
  variant = "default",
  showLabel = false,
  children,
  className,
  tabIndex,
  ariaExpanded,
  ariaControls,
}: {
  icon: LucideIcon;
  label: string;
  title?: string;
  onClick: () => void;
  disabled?: boolean;
  variant?: "default" | "danger" | "primary";
  showLabel?: boolean;
  children?: ReactNode;
  className?: string;
  tabIndex?: number;
  ariaExpanded?: boolean;
  ariaControls?: string;
}) {
  return (
    <button
      aria-controls={ariaControls}
      aria-expanded={ariaExpanded}
      aria-label={showLabel ? undefined : label}
      className={`icon-button icon-button-${variant}${className ? ` ${className}` : ""}`}
      disabled={disabled}
      onClick={onClick}
      tabIndex={tabIndex}
      title={title ?? label}
      type="button"
    >
      <Icon aria-hidden="true" size={15} strokeWidth={2} />
      {showLabel ? <span>{children ?? label}</span> : children}
    </button>
  );
}

/** Thin vertical divider between groups of icon buttons. */
export function IconButtonSeparator() {
  return <span aria-hidden="true" className="icon-button-separator" />;
}