import { X } from 'lucide-react';
import type { ButtonHTMLAttributes, ReactNode } from 'react';

type PlatformModalCloseButtonVariant =
  | 'profile'
  | 'profileCompact'
  | 'floating'
  | 'floatingPlain'
  | 'platformIcon'
  | 'editorDark';

type PlatformModalCloseButtonProps = Omit<
  ButtonHTMLAttributes<HTMLButtonElement>,
  'children'
> & {
  label: string;
  variant?: PlatformModalCloseButtonVariant;
  icon?: ReactNode;
};

const PLATFORM_MODAL_CLOSE_BUTTON_CLASS_BY_VARIANT: Record<
  PlatformModalCloseButtonVariant,
  string
> = {
  profile:
    'platform-modal-close flex h-9 w-9 items-center justify-center rounded-full',
  profileCompact:
    'platform-profile-icon-button flex h-8 w-8 items-center justify-center rounded-full',
  floating:
    'absolute right-3 top-3 z-10 flex h-8 w-8 items-center justify-center rounded-full bg-white/80 text-[#ff4056] shadow-sm',
  floatingPlain:
    'absolute right-3 top-2 z-10 flex h-8 w-8 items-center justify-center rounded-full text-[#ff4056]',
  platformIcon: 'platform-icon-button',
  editorDark:
    'platform-modal-close-button--editor-dark rounded-full border border-white/10 bg-white/5 p-2 text-zinc-300 transition hover:bg-white/10 hover:text-white',
};

/**
 * 平台弹窗关闭按钮。
 * 收口个人中心和平台浮层里重复的关闭 aria、尺寸和视觉样式。
 */
export function PlatformModalCloseButton({
  label,
  variant = 'profile',
  icon = <X className="h-4 w-4" />,
  className,
  type = 'button',
  ...buttonProps
}: PlatformModalCloseButtonProps) {
  return (
    <button
      {...buttonProps}
      type={type}
      aria-label={label}
      className={[
        PLATFORM_MODAL_CLOSE_BUTTON_CLASS_BY_VARIANT[variant],
        className,
      ]
        .filter(Boolean)
        .join(' ')}
    >
      {icon}
    </button>
  );
}