@inject IJSRuntime JS
@inject LocalizationService Loc

<button class="theme-toggle" @onclick="ToggleTheme" title="@Loc["theme.toggle"]">
    @(isDark ? "☀️" : "🌙")
</button>

<style>
    .theme-toggle {
        position: fixed;
        top: 15px;
        right: 15px;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: 1px solid var(--border-color);
        background-color: var(--bg-secondary);
        color: var(--text-primary);
        font-size: 16px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        z-index: 1000;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .theme-toggle:hover {
        transform: scale(1.1);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }

    .theme-toggle:active {
        transform: scale(0.95);
    }
</style>

@code {
    private bool isDark = false;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // JavaScript에서 현재 테마 가져오기
            var theme = await JS.InvokeAsync<string>("getTheme");
            isDark = theme == "dark";
            StateHasChanged();
        }
    }

    private async Task ToggleTheme()
    {
        isDark = !isDark;
        var newTheme = isDark ? "dark" : "light";
        await JS.InvokeVoidAsync("setTheme", newTheme);
    }
}