1
import {
2
  ImageElement,
3
  ImageFigureFrame,
4
  ImageLoadingSkeleton,
5
  resolveImageFrameStyle,
6
} from "@/shared/editor/presentation/image";
7
import type { SitesImageProps } from "@/shared/sites/island-schemas";
8
import { SiteIslandHost } from "./island-host";
9
 
10
export function SitesImageIslandHost(props: SitesImageProps) {
11
  const { bid, src, alt, title, align, width, naturalWidth, naturalHeight, brightness } = props;
12
  const frameStyle = resolveImageFrameStyle({ width, naturalWidth, naturalHeight });
13
 
14
  return (
15
    <SiteIslandHost name="sites-image" props={props}>
16
      <ImageFigureFrame bid={bid} align={align} containerClassName="is-loading" containerStyle={frameStyle}>
17
        <ImageElement src={src} alt={alt ?? undefined} title={title ?? undefined} brightness={brightness} />
18
        <ImageLoadingSkeleton />
19
      </ImageFigureFrame>
20
    </SiteIslandHost>
21
  );
22
}