import Image from "../../Image"

import { TripAdvisorChip } from "../../TripAdvisorChip"
import { hotelCardDialogImageVariants } from "./variants"

import ImageFallback from "../../ImageFallback"

export type HotelCardDialogImageProps = {
  imageSrc?: string
  altText?: string
  rating?: { tripAdvisor?: number | null }
  imageError: boolean
  setImageError: (error: boolean) => void
  position: "top" | "left"
}

export function HotelCardDialogImage({
  imageSrc,
  altText,
  rating,
  imageError,
  setImageError,
  position,
}: HotelCardDialogImageProps) {
  const classNames = hotelCardDialogImageVariants({ position })

  return (
    <div className={classNames}>
      {!imageSrc || imageError ? (
        <ImageFallback />
      ) : (
        <Image
          src={imageSrc}
          alt={altText || ""}
          fill
          sizes={position === "top" ? "200px" : "450px"}
          onError={() => setImageError(true)}
        />
      )}
      {rating?.tripAdvisor && (
        <TripAdvisorChip
          rating={rating.tripAdvisor}
          color="Neutral"
          size={position === "top" ? "xs" : "sm"}
          wrapper={position === "top" ? "x05" : "x15"}
        />
      )}
    </div>
  )
}