---
interface Props {
  title?: string;
  open?: boolean;
}

const { title = 'Show spoiler', open = false } = Astro.props;
---

<details class="not-prose my-5 rounded-xl border border-dashed border-surface-700/70 bg-surface-900/50 px-4 py-3" open={open}>
  <summary class="cursor-pointer list-none font-mono text-xs uppercase tracking-[0.1em] text-accent-300">
    <span class="inline-flex items-center gap-2">
      <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
        <path stroke-linecap="round" stroke-linejoin="round" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.968 9.968 0 012.06-3.368m2.25-1.93A9.956 9.956 0 0112 5c4.478 0 8.268 2.943 9.543 7a9.964 9.964 0 01-4.293 5.274M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
      </svg>
      {title}
    </span>
  </summary>
  <div class="mt-3 border-t border-dashed border-surface-700/60 pt-3 text-sm leading-relaxed text-surface-300 [&_p]:my-2">
    <slot />
  </div>
</details>