import Caption from "@scandic-hotels/design-system/Caption"
import Image from "@scandic-hotels/design-system/Image"

import styles from "./imageContainer.module.css"

import type { ImageContainerProps } from "@/types/components/imageContainer"

export default function ImageContainer({
  leftImage,
  rightImage,
}: ImageContainerProps) {
  return (
    <section className={styles.container}>
      <article>
        <Image
          className={styles.image}
          src={leftImage.url}
          height={365}
          width={600}
          alt={leftImage.meta.alt || leftImage.title}
          focalPoint={leftImage.focalPoint}
        />
        <Caption>{leftImage.meta.caption}</Caption>
      </article>
      <article>
        <Image
          className={styles.image}
          src={rightImage.url}
          height={365}
          width={600}
          alt={rightImage.meta.alt || rightImage.title}
          focalPoint={rightImage.focalPoint}
        />
        <Caption>{leftImage.meta.caption}</Caption>
      </article>
    </section>
  )
}