<script lang="ts">
  import CheckCircleSuccessIcon from "$lib/ui/icons/CheckCircleSuccessIcon.svelte";
  import { createEventDispatcher } from "svelte";

  export let completed: boolean;
  export let busy: boolean;

  const dispatch = createEventDispatcher<{
    complete: void;
    uncomplete: void;
  }>();
</script>

{#if completed}
  <button
    class="btn primary primary-action"
    aria-label="Deshacer completar"
    title="Deshacer completar"
    on:click|preventDefault={() => dispatch("uncomplete")}
    disabled={busy}
  >
    ↩️ Deshacer
  </button>
{:else}
  <button
    class="btn primary primary-action"
    aria-label="Completar"
    title="Completar"
    on:click|preventDefault={() => dispatch("complete")}
    disabled={busy}
  >
    <CheckCircleSuccessIcon />
    Completar
  </button>
{/if}
