import type { CSSProperties } from "react";

export type StateDotTone = "online" | "offline" | "active" | "error" | "warn";

export interface StateDotProps
{
    tone: StateDotTone;
    /** 直径，默认 6px。 */
    size?: number;
    title?: string;
}

// 6px 圆点。color 随状态过渡，无光晕装饰。
const TONE_COLOR: Record<StateDotTone, string> = {
    online:  "var(--state-online)",
    offline: "var(--text-muted)",
    active:  "var(--accent)",
    error:   "var(--state-error)",
    warn:    "var(--state-warn)",
};

export function StateDot(props: StateDotProps)
{
    const { tone, size = 6, title } = props;
    const style: CSSProperties = {
        display:       "inline-block",
        width:         size,
        height:        size,
        borderRadius:  "50%",
        background:    TONE_COLOR[tone],
        transition:    "background-color var(--dur-slow) var(--ease-in-out)",
        flexShrink:    0,
    };
    return <span style={style} role={title ? "img" : undefined} aria-label={title} title={title} />;
}
