<script>
    import EmptyState from "$components/EmptyState.svelte";
    import clsx from "clsx";

    export let summaries = [];
</script>

<div class="card mt-3">
    <div class="card-header">
        <h5 class="card-title">Ringkasan</h5>
    </div>
    <div class="card-body d-grid gap-2">
        {#if summaries.length > 0}
            {#each summaries as summary}
                <div class={clsx("alert", "mb-0", summary.ok ? "alert-success" : "alert-danger")}>
                    <i class={clsx("ti", summary.ok ? "ti-check text-success" : "ti-x text-danger")}></i>
                    {summary.name}
                </div>
            {/each}
        {:else}
            <EmptyState height="150px" />
        {/if}
    </div>
</div>
