// packages/core/src/components/image/image-root.tsx
import type { JSX } from "solid-js";
import { createSignal, splitProps } from "solid-js";
import {
  ImageContextProvider,
  type ImageContextValue,
  type ImageLoadingStatus,
} from "./image-context";

export interface ImageRootProps extends JSX.HTMLAttributes<HTMLSpanElement> {
  /** Child elements (Image.Img, Image.Fallback, etc.). */
  children: JSX.Element;
}

/**
 * Root container for Image. Provides loading status context to all Image parts.
 */
export function ImageRoot(props: ImageRootProps): JSX.Element {
  const [local, rest] = splitProps(props, ["children"]);
  const [loadingStatus, setLoadingStatus] = createSignal<ImageLoadingStatus>("loading");

  const ctx: ImageContextValue = {
    loadingStatus,
    setLoadingStatus,
    src: () => undefined,
  };

  return (
    <ImageContextProvider value={ctx}>
      <span {...rest}>{local.children}</span>
    </ImageContextProvider>
  );
}