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 styles from "./hotelCard.module.css"

const chipValues = [
  "Free cancellation until 18:00",
  "Breakfast included",
  "Free WiFi",
  "Pay at the hotel",
]

export default function HotelCard() {
  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">Helsinki Hub</Title>
        </div>
        <div className={styles.description}>
          <span>Kaisaniemenkatu 7, Helsinki</span>
          <span>
            Modern urban hotel in a impressive 1920s printing house in Helsinki
            city centre.
          </span>
        </div>
        <div className={styles.labels}>
          {chipValues.map((value) => (
            <Chip key={value}>{value}</Chip>
          ))}
        </div>
        <div className={styles.button}>
          <Body color="burgundy">
            <span>Only 4 rooms left</span>
          </Body>
          <Button theme="base" intent="primary" size="small">
            Book from 1549 SEK/night
          </Button>
        </div>
      </div>
    </div>
  )
}
