component Modal {
    props {
        @event onConfirmed = function
    }

    state isOpen = false

    functions {
        function confirmed() {
            isOpen = false; 
            if(onConfirmed) {
                onConfirmed()
            }
        }
    }

    view {
        <main
            class="flex min-h-screen items-center justify-center bg-[var(--wire-color-background)] p-6"
        >
            <button
                type="button"
                class="rounded-xl bg-[var(--wire-color-primary)] px-5 py-3 font-semibold text-white shadow-lg transition hover:opacity-90"
                @click="isOpen = true"
            >
                Open Transparent Modal
            </button>

            <div
                class:hidden="isOpen == false"
                class="fixed inset-0 z-50 flex items-center justify-center bg-black/20 p-4 backdrop-blur-sm"
            >
                <div
                    class="relative w-full max-w-lg overflow-hidden rounded-3xl border border-white/20 bg-white/10 p-6 shadow-2xl backdrop-blur-2xl dark:border-white/10 dark:bg-black/20"
                >
                    <div
                        class="pointer-events-none absolute -right-20 -top-20 h-48 w-48 rounded-full bg-[var(--wire-color-primary)]/30 blur-3xl"
                    >
                    </div>

                    <div
                        class="pointer-events-none absolute -bottom-20 -left-20 h-48 w-48 rounded-full bg-cyan-500/20 blur-3xl"
                    >
                    </div>

                    <div
                        class="relative z-10"
                    >
                        <div
                            class="mb-6 flex items-start justify-between gap-4"
                        >
                            <div>
                                <p
                                    class="mb-2 text-sm font-semibold uppercase tracking-wider text-[var(--wire-color-primary)]"
                                >
                                    Transparent Modal
                                </p>

                                <h2
                                    class="text-2xl font-bold text-[var(--wire-color-text)]"
                                >
                                    Welcome to WRNexusJS
                                </h2>

                                <p
                                    class="mt-2 text-sm leading-6 text-[var(--wire-color-text-muted)]"
                                >
                                    This modal uses a transparent glass background with blur,
                                    soft borders, and theme-aware colors.
                                </p>
                            </div>

                            <button
                                type="button"
                                aria-label="Close modal"
                                class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full border border-white/20 bg-white/10 text-xl text-[var(--wire-color-text)] transition hover:bg-white/20 dark:border-white/10 dark:bg-black/20 dark:hover:bg-black/30"
                                @click="isOpen = false"
                            >
                                ×
                            </button>
                        </div>

                        <div
                            class="rounded-2xl border border-white/20 bg-white/10 p-4 backdrop-blur-lg dark:border-white/10 dark:bg-black/10"
                        >
                            <p
                                class="text-sm text-[var(--wire-color-text-muted)]"
                            >
                                You can place forms, confirmation messages, account details,
                                images, or any other component inside this modal.
                            </p>
                        </div>

                        <div
                            class="mt-6 flex flex-col-reverse gap-3 sm:flex-row sm:justify-end"
                        >
                            <button
                                type="button"
                                class="rounded-xl border border-white/20 bg-white/10 px-5 py-2.5 font-medium text-[var(--wire-color-text)] transition hover:bg-white/20 dark:border-white/10 dark:bg-black/20 dark:hover:bg-black/30"
                                @click="isOpen = false"
                            >
                                Cancel
                            </button>

                            <button
                                type="button"
                                class="rounded-xl bg-[var(--wire-color-primary)] px-5 py-2.5 font-semibold text-white shadow-lg transition hover:opacity-90"
                                @click="confirmed()"
                            >
                                Continue
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    }

    style {
    }
}