import type { ReactNode } from "react";
import s from "./Callout.module.css";

export type CalloutTone = "error" | "warn" | "ok" | "info";

export interface CalloutProps
{
    tone?: CalloutTone;
    icon?: ReactNode;
    title?: ReactNode;
    children: ReactNode;
}

const TONE_CLASS: Record<CalloutTone, string> = {
    error: s.toneError,
    warn:  s.toneWarn,
    ok:    s.toneOk,
    info:  s.toneInfo,
};

export function Callout(props: CalloutProps)
{
    const { tone = "info", icon, title, children } = props;
    return (
        <div className={`${s.callout} ${TONE_CLASS[tone]}`} role={tone === "error" ? "alert" : undefined}>
            {icon && <span className={s.icon}>{icon}</span>}
            {/* .justify 由 cjk.css 提供:在 CJK lang 下让 body 段落走两端对齐;
                title 不需要(短句),用单独 div 隔开避免被 .justify * 子树覆盖。 */}
            <div className={s.body}>
                {title && <div className={s.title}>{title}</div>}
                <div className="justify" data-jz-level="paragraph">{children}</div>
            </div>
        </div>
    );
}
