import NextImage, { ImageProps as NextImageProps } from "next/image";
import styles from "./image.module.scss";

type ImageProps = NextImageProps & {
  attribution?: string | null;
  caption?: string | null;
  imageFormat?: string | null; // "original" | "bleed" | "fullWidth"
};

export function ImageFigure(props: ImageProps) {
  const { attribution, caption, imageFormat, ...nextImageProps } = props;
  return (
    <figure
      className={`${styles.image} ${imageFormat ? styles[imageFormat] : ""}`}
    >
      <div className={styles.imageWrapper}>
        <NextImage {...nextImageProps} />
        {attribution && <div className={styles.attribution}>{attribution}</div>}
      </div>
      {caption && <figcaption>{caption}</figcaption>}
    </figure>
  );
}

export function Image(props: NextImageProps) {
  return <NextImage {...props} />;
}