import { type ButtonHTMLAttributes, forwardRef, type ReactNode } from 'react';

type PlatformInlineOptionButtonProps = Omit<
  ButtonHTMLAttributes<HTMLButtonElement>,
  'children'
> & {
  children: ReactNode;
  trailingIcon?: ReactNode;
};

/**
 * 平台内联选项按钮。
 * 统一承接工具面板里“当前选项 + 下拉箭头”这类轻量 pill 动作。
 */
export const PlatformInlineOptionButton = forwardRef<
  HTMLButtonElement,
  PlatformInlineOptionButtonProps
>(function PlatformInlineOptionButton(
  { children, trailingIcon, className, type = 'button', ...buttonProps },
  ref,
) {
  const actionClassName = [
    'platform-inline-option-button inline-flex items-center justify-center border-0 bg-transparent text-sm font-black text-slate-700 transition-colors hover:text-slate-950 disabled:cursor-not-allowed disabled:opacity-55',
    className,
  ]
    .filter(Boolean)
    .join(' ');

  return (
    <button {...buttonProps} ref={ref} type={type} className={actionClassName}>
      <span className="platform-inline-option-button__label">{children}</span>
      {trailingIcon ? (
        <span className="platform-inline-option-button__trailing" aria-hidden="true">
          {trailingIcon}
        </span>
      ) : null}
    </button>
  );
});