"use client";

import React from "react";

export interface TopBarButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  /** Active / pressed (e.g. dropdown open) */
  isActive?: boolean;
  /** Stretch to chrome height (full top-bar cell) vs compact 28×28 */
  stretch?: boolean;
}

/**
 * Craft-inspired top-bar control: fixed density, soft hover, no JS hover styles.
 * Default: 28×28, rounded 6px — use for icon actions in chrome.
 */
export const TopBarButton = React.forwardRef<HTMLButtonElement, TopBarButtonProps>(
  function TopBarButton(
    { children, isActive, stretch, className, disabled, type = "button", style, ...props },
    ref,
  ) {
    return (
      <button
        ref={ref}
        type={type}
        disabled={disabled}
        data-active={isActive ? "true" : "false"}
        className={["pi-topbar-btn", stretch ? "pi-topbar-btn--stretch" : "", className]
          .filter(Boolean)
          .join(" ")}
        style={style}
        {...props}
      >
        {children}
      </button>
    );
  },
);