import { graphql, unmaskFragment } from "@/gql";
import { type ImageWithTextBlockFragment } from "@/gql/graphql";
import { ImageFigure } from "@/components/general/Image";
import { ImageFragmentDefinition } from "@/lib/common";

const ImageWithTextBlockFragmentDefinition = graphql(`
  fragment ImageWithTextBlock on ImageWithTextBlock {
    image {
      ...Image
    }
    imageFormat
    text
  }
`);

export function ImageWithTextBlock({
  block,
}: {
  block: ImageWithTextBlockFragment;
}) {
  const image = unmaskFragment(ImageFragmentDefinition, block.image);
  return (
    <ImageFigure
      src={image.url}
      alt={image.alt ?? ""}
      width={image.width}
      height={image.height}
      attribution={image.attribution}
      caption={block.text}
      imageFormat={block.imageFormat}
    />
  );
}
