<script>
    let { onDelete, text } = $props();
    let isClicked = $state(false);

    function handleTryDelete(e) {
        e.preventDefault();
        isClicked = true;
    }

    function handleCancel(e) {
        e.preventDefault();
        isClicked = false;
    }

    function handleRealDelete(e) {
        e.preventDefault();
        onDelete();
    }
</script>

{#if !isClicked}
    <form onsubmit={handleTryDelete}>
        <button class="danger" type="submit">
            {@render text()}
        </button>
    </form>
{/if}
{#if isClicked}
    Are you sure?
    <form onsubmit={handleCancel}>
        <button class="secondary" type="submit">No</button>
    </form>
    <form onsubmit={handleRealDelete}>
        <button class="danger" type="submit">Yes</button>
    </form>
{/if}
