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

type PlatformQuantityBadgePlacement = 'bottomRight';
type PlatformQuantityBadgeTone = 'dark';

type PlatformQuantityBadgeProps = Omit<
  HTMLAttributes<HTMLSpanElement>,
  'children'
> & {
  children: ReactNode;
  placement?: PlatformQuantityBadgePlacement;
  tone?: PlatformQuantityBadgeTone;
};

const PLATFORM_QUANTITY_BADGE_PLACEMENT_CLASS: Record<
  PlatformQuantityBadgePlacement,
  string
> = {
  bottomRight: 'bottom-1 right-1',
};

const PLATFORM_QUANTITY_BADGE_TONE_CLASS: Record<
  PlatformQuantityBadgeTone,
  string
> = {
  dark: 'border-black/35 bg-black/70 text-white',
};

/**
 * 平台物品数量角标。
 * 统一承接物品格、奖励格等缩略图右下角的数量显示。
 */
export function PlatformQuantityBadge({
  children,
  placement = 'bottomRight',
  tone = 'dark',
  className,
  ...spanProps
}: PlatformQuantityBadgeProps) {
  return (
    <span
      {...spanProps}
      className={[
        'absolute rounded-full border px-1.5 py-0.5 text-[10px] font-semibold',
        PLATFORM_QUANTITY_BADGE_PLACEMENT_CLASS[placement],
        PLATFORM_QUANTITY_BADGE_TONE_CLASS[tone],
        className,
      ]
        .filter(Boolean)
        .join(' ')}
    >
      {children}
    </span>
  );
}