import Image from "@/components/Image"

import Card from ".."

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

import type { CardImageProps } from "@/types/components/cardImage"

export default function CardImage({
  card,
  imageCards,
  className,
}: CardImageProps) {
  return (
    <article className={`${styles.container} ${className}`}>
      <div className={styles.imageContainer}>
        {imageCards?.map(
          ({ backgroundImage }) =>
            backgroundImage && (
              <Image
                key={backgroundImage.id}
                src={backgroundImage.url}
                className={styles.image}
                alt={backgroundImage.title}
                width={180}
                height={180}
                focalPoint={backgroundImage.focalPoint}
              />
            )
        )}
      </div>
      <Card {...card} className={styles.card} />
    </article>
  )
}