import Image from "@/components/Image"
import Card from "@/components/TempDesignSystem/Card"

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

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

export default function CardImage({
  card,
  imageCards,
  className,
}: CardImageProps) {
  return (
    <div className={`${styles.cardImage} ${className}`}>
      <div className={styles.imageContainer}>
        {imageCards?.map(
          ({ backgroundImage }) =>
            backgroundImage && (
              <div key={backgroundImage.id} className={styles.imageWrapper}>
                <Image
                  src={backgroundImage.url}
                  className={styles.image}
                  alt={backgroundImage.title}
                  fill
                  sizes="(min-width: 768px) 900px, 100vw"
                  focalPoint={backgroundImage.focalPoint}
                />
              </div>
            )
        )}
      </div>
      <Card {...card} height="dynamic" className={styles.card} />
    </div>
  )
}
