<script lang="ts">
  interface Props {
    open: boolean;
    title?: string;
    message: string;
    details?: string;
    onClose: () => void;
  }

  let {
    open = $bindable(false),
    title = "Erro",
    message,
    details,
    onClose,
  }: Props = $props();
</script>

{#if open}
  <div class="modal modal-open">
    <div class="modal-box">
      <h3 class="font-bold text-lg text-error mb-4 flex items-center gap-2">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-6 w-6"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
          />
        </svg>
        {title}
      </h3>
      <p class="py-4 text-base-content">{message}</p>
      {#if details}
        <div class="bg-base-200 rounded-lg p-3 mb-4">
          <p class="text-sm text-base-content/70 whitespace-pre-line">{details}</p>
        </div>
      {/if}
      <div class="modal-action">
        <button class="btn btn-primary" onclick={() => { open = false; onClose(); }}>
          Fechar
        </button>
      </div>
    </div>
    <div class="modal-backdrop" onclick={() => { open = false; onClose(); }}></div>
  </div>
{/if}

