---
/**
 * Demo.astro — the stable demo seam (ADR-website-001 §3). Call sites use this,
 * not Cast directly, so a future in-page WASM playground island can replace
 * the asciinema player behind the same `{ src, title, autoplay }` contract
 * with no change to the pages that embed it.
 */
import Cast from './Cast.astro';

interface Props {
  /** Path to the cast, e.g. `/casts/quickstart.cast`. */
  src: string;
  /** Optional caption shown above the demo. */
  title?: string;
  autoplay?: boolean;
  loop?: boolean;
}

const { src, title, autoplay = false, loop = false } = Astro.props;
---

<figure class="demo not-content">
  {title && <figcaption class="demo-caption">{title}</figcaption>}
  <Cast src={src} autoPlay={autoplay} loop={loop} />
</figure>

<style>
  /* Cap the demo width and centre it so the player (which scales its font to
     fill its container, `fit: 'width'`) doesn't blow up to the full
     content-column width on the wide splash layout — keeps the terminal font
     close to the surrounding text. */
  .demo {
    margin: 1.5rem auto;
    max-width: 46rem;
  }
  .demo-caption {
    font-size: var(--sl-text-sm);
    color: var(--sl-color-gray-3);
    margin-block-end: 0.5rem;
  }
</style>
