import s from "./Wordmark.module.css";

export interface WordmarkProps
{
    /** 透传到外层 span 的额外类名（容器经 font-size 控制字号 / 定位）。 */
    className?: string;
}

// 品牌字标：吉祥物 logo mark + “Commilitia Drop”（Fredoka 600 混排双色），严格对齐
// 品牌资产 README。规范要求页面不得以纯文字呈现品牌，故 logo 图与文字成对出现。
// logo 高度随 font-size（em）缩放；图为装饰（相邻文字已含品牌名），故 aria-hidden。
// 浅色 Commilitia=Ink(#2C2118) / Drop=Amber(#DB9410)，深色背景转 白 / #F8C637。品牌名
// 是专有名词、不本地化，故两段写死，不走 i18n。
export function Wordmark(props: WordmarkProps)
{
    const cls = props.className ? `${s.wordmark} ${props.className}` : s.wordmark;
    return (
        <span className={cls}>
            <img className={s.mark} src="/logo-mark.png" alt="" aria-hidden="true" />
            <span className={s.text}>
                <span className={s.name}>Commilitia</span>{" "}
                <span className={s.drop}>Drop</span>
            </span>
        </span>
    );
}
