@if (IsOpen)
{
    <div class="fixed inset-0 z-50 flex items-center justify-center">
        <!-- Backdrop -->
        <div
            class="absolute inset-0 bg-black/60"
            @onclick="Close">
        </div>

        <!-- Modal -->
        <div class="relative z-10 w-full max-w-md rounded border border-zinc-800 bg-zinc-900 p-4 shadow-lg">
            <div class="mb-3 text-lg font-semibold text-zinc-100">
                @Title
            </div>

            <div class="mb-4 text-sm text-zinc-300">
                @ChildContent
            </div>

            <div class="flex justify-end gap-2">
                <button
                    class="px-3 py-1 text-sm rounded bg-zinc-800 hover:bg-zinc-700 text-zinc-300 transition"
                    @onclick="Close">
                    Cancel
                </button>

                <button
                    class="px-3 py-1 text-sm rounded text-white transition @ConfirmClass"
                    @onclick="Confirm">
                    @ConfirmText
                </button>
            </div>
        </div>
    </div>
}

@code{
    [Parameter] public bool IsOpen { get; set; }
    [Parameter] public EventCallback<bool> IsOpenChanged { get; set; }

    [Parameter][EditorRequired] public string Title { get; set; } = default!;
    [Parameter] public string ConfirmText { get; set; } = "Confirm";
    [Parameter] public string ConfirmClass { get; set; } = "bg-emerald-600 hover:bg-emerald-500";

    [Parameter] public RenderFragment? ChildContent { get; set; }

    [Parameter][EditorRequired] public EventCallback OnConfirm { get; set; }

    async Task Close()
    {
        IsOpen = false;
        await IsOpenChanged.InvokeAsync(false);
    }

    async Task Confirm()
    {
        await OnConfirm.InvokeAsync();
        await Close();
    }

}