import { ScandicLogoIcon } from "@/components/Icons"
import Image from "@/components/Image"
import Button from "@/components/TempDesignSystem/Button"
import Chip from "@/components/TempDesignSystem/Chip"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"

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

import { HotelCardProps } from "@/types/components/hotelReservation/selectHotel/hotelCardProps"

export default async function HotelCard({ hotel }: HotelCardProps) {
  const { formatMessage } = await getIntl()
  return (
    <article className={styles.card}>
      <Image
        src={hotel.hotelContent.images.imageSizes.large}
        alt={hotel.hotelContent.images.metaData.altText}
        width={300}
        height={200}
        className={styles.image}
      />
      <div className={styles.information}>
        <header className={styles.title}>
          <ScandicLogoIcon color="red" />
          <Title as="h4" textTransform="capitalize">
            {hotel.name}
          </Title>
        </header>
        <div className={styles.description}>
          <span>{`${hotel.address.streetAddress}, ${hotel.address.city}`}</span>
          <span>{hotel.hotelContent.texts.descriptions.short}</span>
        </div>
        <div className={styles.chips}>
          {hotel.detailedFacilities.slice(0, 6).map((chip, index) => (
            <Chip key={`chip-${index}`}>{chip.name}</Chip>
          ))}
        </div>
        <footer className={styles.booking}>
          <Button
            theme="base"
            intent="primary"
            size="small"
            className={styles.button}
          >
            {formatMessage({ id: "Book" })}
          </Button>
        </footer>
      </div>
    </article>
  )
}