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

type PlatformFloatingMenuProps = HTMLAttributes<HTMLDivElement> & {
  children: ReactNode;
  className?: string;
  label?: string;
  placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
  style?: CSSProperties;
};

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

/**
 * 平台浮层菜单原语。
 * 用于卡片角标、画布局部菜单等轻量动作集合，统一 role 与菜单项 chrome。
 */
export function PlatformFloatingMenu({
  children,
  className,
  label,
  placement = 'top-end',
  style,
  onPointerDown,
  ...divProps
}: PlatformFloatingMenuProps) {
  return (
    <div
      {...divProps}
      className={[
        'platform-floating-menu',
        `platform-floating-menu--${placement}`,
        className,
      ]
        .filter(Boolean)
        .join(' ')}
      role="menu"
      aria-label={label}
      style={style}
      onPointerDown={(event) => {
        event.stopPropagation();
        onPointerDown?.(event);
      }}
    >
      {children}
    </div>
  );
}

export function PlatformFloatingMenuItem({
  icon,
  children,
  className,
  type = 'button',
  ...buttonProps
}: PlatformFloatingMenuItemProps) {
  return (
    <button
      {...buttonProps}
      type={type}
      className={['platform-floating-menu__item', className]
        .filter(Boolean)
        .join(' ')}
      role="menuitem"
    >
      {icon}
      <span>{children}</span>
    </button>
  );
}