import type { JSX } from "solid-js";
import { Show, splitProps } from "solid-js";
import type { AvatarFallbackProps } from "./avatar.props";
import { useAvatarContext } from "./avatar-context";

/** Rendered when the avatar image has not successfully loaded. */
export function AvatarFallback(props: AvatarFallbackProps): JSX.Element {
  const [local, rest] = splitProps(props, ["children"]);
  const context = useAvatarContext();
  return (
    <Show when={context.imageLoadingStatus() !== "loaded"}>
      <span data-scope="avatar" data-part="fallback" {...rest}>{local.children}</span>
    </Show>
  );
}
