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

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

/**
 * 平台内联选项按钮。
 * 统一承接工具面板里“当前选项 + 下拉箭头”这类轻量 pill 动作。
 */
export function PlatformInlineOptionButton({
  children,
  trailingIcon,
  className,
  type = 'button',
  ...buttonProps
}: PlatformInlineOptionButtonProps) {
  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} 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>
  );
}