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

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

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

interface DialogImageProps {
  image?: string
  altText?: string
  rating?: number
  imageError: boolean
  setImageError: (error: boolean) => void
}
export default function DialogImage({
  image,
  altText,
  rating,
  imageError,
  setImageError,
}: DialogImageProps) {
  return (
    <div className={styles.imageContainer}>
      {!image || imageError ? (
        <div className={styles.imagePlaceholder} />
      ) : (
        <Image
          src={image}
          alt={altText || ""}
          fill
          onError={() => setImageError(true)}
        />
      )}
      {rating ? (
        <div className={styles.tripAdvisor}>
          <Chip className={styles.tripAdvisor}>
            <TripadvisorIcon color="Icon/Interactive/Default" />
            <Typography variant="Tag/sm">
              <span>{rating}</span>
            </Typography>
          </Chip>
        </div>
      ) : null}
    </div>
  )
}
