import type { HTMLAttributes, ReactNode } from "react";
import s from "./Badge.module.css";

export type BadgeTone = "neutral" | "accent" | "online" | "error" | "warn" | "info" | "emphasis";

export interface BadgeProps extends HTMLAttributes<HTMLSpanElement>
{
    tone?: BadgeTone;
    /** 在文字左侧加一个状态点。 */
    dot?: boolean;
    children: ReactNode;
}

const TONE_CLASS: Record<BadgeTone, string> = {
    neutral:  s.neutral,
    accent:   s.accent,
    online:   s.online,
    error:    s.error,
    warn:     s.warn,
    info:     s.info,
    emphasis: s.emphasis,
};

export function Badge(props: BadgeProps)
{
    const { tone = "neutral", dot, className, children, ...rest } = props;
    // cjk-isolate 全局类：Badge 是「视觉文本块」——自带背景的 chip，聚珍归为隔离类
    // （而非整体 pill）：两端与相邻 CJK/Latin 文本补 0.25em 边界间距，内部文字仍照常排版。
    const cls = [ s.badge, TONE_CLASS[tone], "cjk-isolate", className ?? "" ]
        .filter(Boolean).join(" ");

    return (
        <span className={cls} {...rest}>
            {dot && <span className={s.dot} aria-hidden="true" />}
            {/* children 包在单个 inline span：.badge 是 inline-flex + gap，若聚珍
               在混排 / 带标点的 children 内注入 jz-hws / jz-char，这些行内元素会
               各自成为独立 flex item、让 gap 在文本中间叠加（同 Button.tsx 的 label
               span）。包成 span 后整段算 1 个 flex item，聚珍仅在 span 内部按内联流处理。 */}
            <span className={s.label}>{children}</span>
        </span>
    );
}
