<script>
    import Icon from "../common/Icon.svelte";

    export let step;
</script>

<div class="step step-{step.status}">
    <div class="step-icon">
        {#if step.status === "success"}
            <Icon icon="check"></Icon>
        {:else}
            <Icon icon="close"></Icon>
        {/if}
    </div>
    <div style="width:100%">
        <h4>{step.name}</h4>
        <details>
            <summary>Instructions</summary>
            <code class="instructions">{step.instructions}</code>
        </details>
    </div>
</div>

<style>
    .step-success .step-icon {
        background: var(--suc10);
        color: var(--suc100);
    }

    .step-fail .step-icon {
        background: var(--err10);
        color: var(--err100);
    }

    .step-icon {
        padding: 12px;
        border-radius: 12px;
    }

    .step {
        width: 100%;
        display: flex;
        align-items: start;
        gap: 10px;
        justify-content: space-between;

        padding: 12px;
        border-radius: 12px;
    }

    details {
        width: 100%;
    }

    .instructions {
        margin-top: 20px;
        padding: 12px;
        border-radius: 12px;
        background: var(--p10);
        white-space: break-spaces;
        display: block;
    }
</style>
