---
/**
 * One slide of a <Carousel>: Blume's own <Frame> around an <img>, so a slide
 * is pixel-identical to a framed image elsewhere on the site — `alt` doubles
 * as the frame's hint line and `caption` is Markdown, exactly as in Frame.
 *
 * `src` accepts what MDX authors already write for images: a URL, a
 * root-relative `/file.png` (served from public/, prefixed with the deploy
 * base), or the page-relative `../../public/file.png` form. A relative path
 * that does not pass through public/ has nothing to serve it, so it is a
 * build error rather than a silent 404.
 */
import Frame from "blume/components/content/Frame.astro";
import { withBase } from "blume/components/islands/base-path.ts";

interface Props {
  src: string;
  alt?: string;
  caption?: string;
}

const { src, alt, caption } = Astro.props;

const resolveSrc = (value: string): string => {
  if (URL.canParse(value)) return value;
  if (value.startsWith("/")) return withBase(value);
  const at = value.indexOf("public/");
  if (at === -1) {
    throw new Error(
      `<CarouselImage src="${value}">: a relative src must point into public/ (or use /file.png)`
    );
  }
  return withBase(`/${value.slice(at + "public/".length)}`);
};
---

<blume-carousel-image
  class="block w-full shrink-0 snap-center [&_blume-frame]:my-0"
  role="group"
  aria-roledescription="slide"
>
  <Frame caption={caption} hint={alt}>
    <img alt={alt ?? ""} src={resolveSrc(src)} loading="lazy" draggable="false" />
  </Frame>
</blume-carousel-image>