@inject IGlossaryService glossaryService

@if (TermId != null)
{
    var term = glossaryService.GetTerm(TermId);
    if (term != null)
    {
        <div class="glossaryTooltipWrapper">
            <div class="glossaryTooltipContent">
                <div class="glossaryTooltipHeader">
                    <span class="glossaryTooltipTerm">@term.Term</span>
                    <span class="glossaryTooltipCategory">@term.Category</span>
                </div>
                <div class="glossaryTooltipBody">
                    @term.ShortDefinition
                </div>
            </div>
            @ChildContent
        </div>
    }
}

<style>
    .glossaryTooltipWrapper {
        position: relative;
        display: inline-block;
    }

    .glossaryTooltipContent {
        visibility: hidden;
        position: absolute;
        width: 400px;
        max-width: 93vw;
        bottom: 100%;
        margin-bottom: 8px;
        padding: 12px;
        z-index: 2147483647;
        background-color: var(--info-secondary);
        border: 1px solid var(--info-secondary-border);
        border-radius: 4px;
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
        left: 50%;
        transform: translateX(-50%);
    }

    .glossaryTooltipWrapper:hover .glossaryTooltipContent {
        visibility: visible;
    }

    .glossaryTooltipHeader {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
    }

    .glossaryTooltipTerm {
        font-weight: 800;
        font-size: 1.1rem;
    }

    .glossaryTooltipCategory {
        font-size: 0.8rem;
        opacity: 0.7;
    }

    .glossaryTooltipBody {
        font-size: 0.9rem;
        line-height: 1.4;
    }

    @@media only screen and (max-width: 1025px) {
        .glossaryTooltipContent {
            margin: auto;
            margin-bottom: 20px;
            position: absolute;
        }
    }
</style>

@code {

    [Parameter] public RenderFragment ChildContent { get; set; } = default!;

    [Parameter] public string TermId { get; set; } = default!;

}