<script>
  import Modal from '$lib/components/Modal.svelte';

  let {
    open = $bindable(false),
    item = null,
    deleting = false,
    onConfirm,
    onCancel,
  } = $props();

  function handleConfirm() {
    onConfirm?.();
  }

  function handleCancel() {
    onCancel?.();
  }
</script>

<Modal bind:open title="Confirm Delete" size="sm">
  <div class="py-2">
    <p class="text-base-content/80">
      Are you sure you want to delete the following equipment?
    </p>
    <div class="bg-base-200 rounded-lg p-3 mt-3">
      <p class="font-semibold text-base-content">{item?.InstrumentName || item?.IEID}</p>
      <p class="text-sm text-base-content/60">IEID: {item?.IEID}</p>
    </div>
    <p class="text-sm text-error mt-4">This action cannot be undone.</p>
  </div>
  {#snippet footer()}
    <button class="btn btn-ghost" onclick={handleCancel} disabled={deleting} type="button">
      Cancel
    </button>
    <button class="btn btn-error" onclick={handleConfirm} disabled={deleting} type="button">
      {#if deleting}
        <span class="loading loading-spinner loading-sm mr-2"></span>
      {/if}
      {deleting ? 'Deleting...' : 'Delete'}
    </button>
  {/snippet}
</Modal>
