<script lang="ts">
  // 삭제/되돌릴 수 없는 작업의 확인 dialog. Modal 위 얇은 wrapper.
  // 사용처에서 ui.openModal(id) 호출하면 표시됨.
  import { ui } from '$lib/stores/uiState.svelte';
  import Modal from './Modal.svelte';
  import Button from './Button.svelte';

  type Tone = 'danger' | 'primary';

  interface Props {
    id: string;
    title: string;
    message: string;
    confirmLabel?: string;
    cancelLabel?: string;
    tone?: Tone;
    loading?: boolean;
    onconfirm: () => void | Promise<void>;
  }

  let {
    id,
    title,
    message,
    confirmLabel = '확인',
    cancelLabel = '취소',
    tone = 'danger',
    loading = false,
    onconfirm,
  }: Props = $props();

  function cancel() {
    ui.closeModal(id);
  }

  async function confirm() {
    await onconfirm();
    // onconfirm이 닫지 않으면 우리가 닫는다 (멱등하게 처리됨)
    if (ui.isModalOpen(id)) ui.closeModal(id);
  }
</script>

<Modal {id} {title} size="sm">
  <p class="text-sm text-dim leading-relaxed">{message}</p>

  {#snippet footer()}
    <Button variant="ghost" size="sm" onclick={cancel}>{cancelLabel}</Button>
    <Button variant={tone === 'danger' ? 'danger' : 'primary'} size="sm" {loading} onclick={confirm}>
      {confirmLabel}
    </Button>
  {/snippet}
</Modal>
