import type { JSX } from "solid-js";
import { createSignal, splitProps } from "solid-js";
import type { AvatarRootProps } from "./avatar.props";
import { AvatarContext } from "./avatar-context";

/** Root container for Avatar. Provides image loading status context to all Avatar parts. */
export function AvatarRoot(props: AvatarRootProps): JSX.Element {
  const [local, rest] = splitProps(props, ["children"]);
  const [imageLoadingStatus, setImageLoadingStatus] = createSignal<"idle" | "loading" | "loaded" | "error">("idle");
  return (
    <AvatarContext.Provider value={{ imageLoadingStatus, setImageLoadingStatus }}>
      <span data-scope="avatar" data-part="root" {...rest}>{local.children}</span>
    </AvatarContext.Provider>
  );
}
