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

import { HotelCardData } from "./data"

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

export default function HotelCard({ hotel }: HotelCardData) {
  return (
    <div className={styles.card}>
      <Image src="" alt="hotel image" className={styles.image} />
      <div className={styles.information}>
        <div className={styles.title}>
          <ScandicLogoIcon color="red" />
          <Title as="h4">{hotel.name}</Title>
        </div>
        <div className={styles.description}>
          <span>{hotel.address}</span>
          <span>{hotel.description}</span>
        </div>
        <div className={styles.labels}>
          {hotel.label.map((chip, index) => (
            <Chip key={`chip-${index}`}>{chip}</Chip>
          ))}
        </div>
        <div className={styles.book}>
          <Button
            theme="base"
            intent="primary"
            size="small"
            className={styles.button}
          >
            {hotel.button}
          </Button>
          <Body color="burgundy">
            <span>{hotel.rooms}</span>
          </Body>
        </div>
      </div>
    </div>
  )
}
