@*
    SportIcon — minimal, distinctive inline-SVG icons per sport. Inline (not
    icon library) so the wordmark stays editorial-quant: thin strokes, sharp
    corners, no shadowing. Coverage matches Phase 0 spike findings:
    Basketball=6, Football=11, Tennis=22723, Hockey=43658.
*@

<span class="m-sport @ClassName" role="img" aria-label="@Label" title="@Label" data-sport="@Code">
    @SvgContent
</span>

<style>
    .m-sport {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: var(--m-sport-size, 18px);
        height: var(--m-sport-size, 18px);
        color: var(--m-sport-color, var(--m-c-ink-soft));
        flex: 0 0 auto;
    }
    .m-sport svg { width: 100%; height: 100%; display: block; }
    .m-sport[data-sport="6"] { color: #ff8a00; }      /* basketball — amber */
    .m-sport[data-sport="11"] { color: #1f9e3d; }     /* football — green */
    .m-sport[data-sport="22723"] { color: #0d9488; }  /* tennis — teal */
    .m-sport[data-sport="43658"] { color: #244bff; }  /* hockey — electric blue */
    [data-theme="dark"] .m-sport { filter: brightness(1.1); }
</style>

@code {
    [Parameter, EditorRequired] public int Code { get; set; }
    [Parameter] public string? Label { get; set; }
    [Parameter] public string? ClassName { get; set; }

    private MarkupString SvgContent => new(GetSvg(Code));

    private static string GetSvg(int code) => code switch
    {
        6      => Basketball,
        11     => Football,
        22723  => Tennis,
        43658  => Hockey,
        _      => Generic,
    };

    // SVG glyphs — single-quote attributes so the entire literal can stay on one line.
    private const string Basketball =
        "<svg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round'>" +
        "<circle cx='12' cy='12' r='9' />" +
        "<path d='M3 12h18 M12 3v18 M5 5c4 4 10 4 14 0 M5 19c4-4 10-4 14 0' />" +
        "</svg>";

    private const string Football =
        "<svg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linejoin='round'>" +
        "<circle cx='12' cy='12' r='9' />" +
        "<polygon points='12,7 16.5,10 14.5,15 9.5,15 7.5,10' />" +
        "</svg>";

    private const string Tennis =
        "<svg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round'>" +
        "<circle cx='12' cy='12' r='9' />" +
        "<path d='M3.5 9 C 9 9 15 15 20.5 15' />" +
        "<path d='M3.5 15 C 9 15 15 9 20.5 9' />" +
        "</svg>";

    private const string Hockey =
        "<svg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round'>" +
        "<ellipse cx='12' cy='14' rx='8' ry='3' />" +
        "<path d='M4 14 L4 11 M20 14 L20 11' />" +
        "<path d='M6 7 L18 4' />" +
        "</svg>";

    private const string Generic =
        "<svg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.6'>" +
        "<circle cx='12' cy='12' r='9' />" +
        "<circle cx='12' cy='12' r='3' />" +
        "</svg>";
}