<script lang="ts">
  import HydrationTarget from './HydrationTarget.svelte';
</script>

<section class="mode">
  <header>
    <h2>No directive</h2>
    <p>Pure SSR — no client JavaScript is shipped for this component. It renders on the server and is inert in the browser. Best for content that never needs interactivity.</p>
  </header>
  <HydrationTarget label="<HydrationTarget />" />
</section>

<section class="mode">
  <header>
    <h2><code>mochi:hydrate</code></h2>
    <p>
      Eager hydration — the island boots as soon as its bundle arrives, making it interactive immediately. Use this for above-the-fold UI that the user will touch right away.
    </p>
  </header>
  <HydrationTarget mochi:hydrate label="<HydrationTarget mochi:hydrate />" />
</section>

<section class="mode">
  <header>
    <h2><code>mochi:hydrate:visible</code></h2>
    <p>
      Lazy hydration — the bundle and CSS are only fetched once the island scrolls into view (via an <code>IntersectionObserver</code>). The card below stays inert until you
      scroll it into the viewport.
    </p>
  </header>
  <div class="spacer">
    <p>↓ Scroll down ↓</p>
  </div>
  <HydrationTarget mochi:hydrate:visible label="<HydrationTarget mochi:hydrate:visible />" />
</section>

<section class="mode">
  <header>
    <h2><code>mochi:hydrate:visible={'{{ rootMargin }}'}</code></h2>
    <p>
      You can pass <code>IntersectionObserver</code> options — here
      <code>rootMargin: '200px'</code>
      starts hydration a bit before the island is actually in view.
    </p>
  </header>
  <HydrationTarget mochi:hydrate:visible={{ rootMargin: '200px' }} label={`<HydrationTarget mochi:hydrate:visible={{ rootMargin: '200px' }} />`} />
</section>

<section class="mode">
  <header>
    <h2><code>mochi:defer</code></h2>
    <p>
      Server island — the component is <em>not</em> rendered with the initial page. Instead, a placeholder ships and the browser fetches the rendered HTML from the server
      on-demand. Pair with <code>mochi:hydrate</code> to also make it interactive after it loads.
    </p>
  </header>
  <HydrationTarget mochi:defer mochi:hydrate label="<HydrationTarget mochi:defer mochi:hydrate />">
    <div class="placeholder">Loading from server…</div>
  </HydrationTarget>
</section>