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

type PlatformSlotBadgeTone = 'active' | 'inactive' | 'soft';
type PlatformSlotBadgeSize = 'sm' | 'md';

type PlatformSlotBadgeProps = Omit<
  HTMLAttributes<HTMLSpanElement>,
  'children'
> & {
  children: ReactNode;
  size?: PlatformSlotBadgeSize;
  tone?: PlatformSlotBadgeTone;
};

const PLATFORM_SLOT_BADGE_TONE_CLASS: Record<PlatformSlotBadgeTone, string> = {
  active: 'border-sky-100/70 bg-sky-300 text-slate-950',
  inactive: 'border-zinc-400/70 bg-zinc-900 text-white',
  soft: 'border-transparent bg-white/82 text-[var(--platform-text-strong)] shadow-sm',
};

const PLATFORM_SLOT_BADGE_SIZE_CLASS: Record<PlatformSlotBadgeSize, string> = {
  sm: 'h-5 min-w-5 px-1 text-[10px]',
  md: 'h-6 min-w-6 px-1.5 text-xs',
};

/**
 * 平台紧凑槽位编号徽标。
 * 统一承接角色槽、步骤槽等复合按钮内部的序号 / 主位标记。
 */
export function PlatformSlotBadge({
  children,
  size = 'sm',
  tone = 'inactive',
  className,
  ...spanProps
}: PlatformSlotBadgeProps) {
  return (
    <span
      {...spanProps}
      className={[
        'flex items-center justify-center rounded-full border font-black leading-none',
        PLATFORM_SLOT_BADGE_SIZE_CLASS[size],
        PLATFORM_SLOT_BADGE_TONE_CLASS[tone],
        className,
      ]
        .filter(Boolean)
        .join(' ')}
    >
      {children}
    </span>
  );
}