"use client";

import { type MenuButtonProps } from "./types";

/**
 * A single toolbar icon button. Handles active / disabled / hover states
 * consistently across the whole toolbar.
 */
export default function MenuButton({
  onClick,
  isActive = false,
  disabled = false,
  title,
  children,
  className = "",
}: MenuButtonProps) {
  return (
    <button
      type="button"
      onClick={onClick}
      disabled={disabled}
      title={title}
      aria-pressed={isActive}
      aria-label={title}
      className={`
        inline-flex h-8 w-8 sm:h-9 sm:w-9 shrink-0 items-center justify-center
        rounded-md border border-transparent
        text-sm text-zinc-600 
        transition-colors duration-100
        hover:bg-zinc-100 hover:text-zinc-900         
        disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent
        ${
          isActive
            ? "bg-indigo-100 text-indigo-700 "
            : ""
        }
        ${className}
      `}
    >
      {children}
    </button>
  );
}