// packages/core/src/components/image/image-fallback.tsx
import type { JSX } from "solid-js";
import { Show, splitProps } from "solid-js";
import { useImageContext } from "./image-context";

export interface ImageFallbackProps extends JSX.HTMLAttributes<HTMLSpanElement> {
  /** Fallback content rendered when the image fails to load. */
  children?: JSX.Element | undefined;
}

/**
 * Shown when the image status is "error". Renders fallback content inside a <span>.
 */
export function ImageFallback(props: ImageFallbackProps): JSX.Element {
  const [local, rest] = splitProps(props, ["children"]);
  const ctx = useImageContext();

  return (
    <Show when={ctx.loadingStatus() === "error"}>
      <span {...rest}>{local.children}</span>
    </Show>
  );
}
