// packages/core/src/components/image/image-context.ts
import type { Accessor } from "solid-js";
import { createContext, useContext } from "solid-js";

export type ImageLoadingStatus = "loading" | "loaded" | "error";

export interface ImageContextValue {
  loadingStatus: Accessor<ImageLoadingStatus>;
  setLoadingStatus: (status: ImageLoadingStatus) => void;
  src: Accessor<string | undefined>;
}

const ImageContext = createContext<ImageContextValue>();

/**
 * Returns the Image context. Throws if used outside <Image>.
 */
export function useImageContext(): ImageContextValue {
  const ctx = useContext(ImageContext);
  if (!ctx) {
    throw new Error(
      "[PettyUI] Image parts must be used inside <Image>.\n" +
        "  Fix: Wrap Image.Img, Image.Fallback, etc. inside <Image>.",
    );
  }
  return ctx;
}

/** Provider for Image context. */
export const ImageContextProvider = ImageContext.Provider;
