web/apps/scandic-web/components/HotelReservation/HotelCardDialog/HotelCardDialogImage/index.tsx

import TripadvisorIcon from "@scandic-hotels/design-system/Icons/TripadvisorIcon"

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

import { hotelCardDialogImageVariants } from "./variants"

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

import type { HotelCardDialogImageProps } from "@/types/components/hotelReservation/selectHotel/map"

export default function HotelCardDialogImage({
  firstImage,
  altText,
  ratings,
  imageError,
  setImageError,
  position,
}: HotelCardDialogImageProps) {
  const classNames = hotelCardDialogImageVariants({ position })

  return (
    <div className={classNames}>
      {!firstImage || imageError ? (
        <div className={styles.imagePlaceholder} />
      ) : (
        <Image
          src={firstImage}
          alt={altText || ""}
          fill
          onError={() => setImageError(true)}
        />
      )}
      <div className={styles.tripAdvisor}>
        <Chip className={styles.tripAdvisor}>
          <TripadvisorIcon color="Icon/Interactive/Default" />
          {ratings}
        </Chip>
      </div>
    </div>
  )
}