import Image from '@scandic-hotels/design-system/Image'

import { hotelCardDialogImageVariants } from './variants'
import { TripAdvisorChip } from '@scandic-hotels/design-system/TripAdvisorChip'

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

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

export function HotelCardDialogImage({
  firstImage,
  altText,
  rating,
  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)}
        />
      )}
      {rating?.tripAdvisor && (
        <TripAdvisorChip
          rating={rating.tripAdvisor}
          variant={position === 'top' ? 'small' : 'default'}
        />
      )}
    </div>
  )
}