import type { MouseEvent } from 'react';

import { CHROME_ICONS } from '../uiAssets';
import { PixelIcon } from './PixelIcon';

type PixelCloseButtonProps = {
  onClick: () => void;
  label?: string;
  placement?: 'absolute' | 'inline';
  className?: string;
};

/**
 * RPG 像素风弹窗右上关闭按钮。
 * 统一拦截点击冒泡，避免历史手写 overlay / panel 的点击处理影响关闭行为。
 */
export function PixelCloseButton({
  onClick,
  label = '关闭面板',
  placement = 'absolute',
  className = '',
}: PixelCloseButtonProps) {
  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
    event.preventDefault();
    event.stopPropagation();
    onClick();
  };

  const placementClassName =
    placement === 'absolute'
      ? 'absolute right-4 top-3 sm:right-5 sm:top-4'
      : 'relative shrink-0';

  return (
    <button
      type="button"
      aria-label={label}
      title={label}
      onClick={handleClick}
      className={`${placementClassName} z-20 flex h-9 w-9 items-center justify-center rounded-full border border-white/10 bg-black/30 p-0 text-zinc-400 shadow-[0_8px_18px_rgba(0,0,0,0.28)] transition-colors hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-amber-200/70 ${className}`.trim()}
    >
      <PixelIcon src={CHROME_ICONS.close} className="h-4 w-4" />
    </button>
  );
}