import { ArrowRightIcon, ScandicLogoIcon } from "@/components/Icons"
import Image from "@/components/Image"
import Title from "@/components/TempDesignSystem/Text/Title"

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

export default function ConfirmationCard() {
  return (
    <section className={styles.test}>
      <div>
        <Image
          src="https://test3.scandichotels.com/imagevault/publishedmedia/i11isd60bh119s9486b7/downtown-camper-by-scandic-lobby-reception-desk-ch.jpg?w=640"
          alt=""
          height={400}
          width={200}
          className={styles.image}
        />
      </div>
      <div className={styles.info}>
        <header>
          <ScandicLogoIcon color="red" />
          <Title as="h5" textTransform="capitalize">
            Helsinki Hub
          </Title>
        </header>
        <div className={styles.hotel}>
          <span>Kaisaniemenkatu 7, Helsinki</span>
          <span>Call us at +358 300 870680</span>
        </div>
        <div className={styles.stay}>
          <span>1 night</span>
          <div className={styles.dates}>
            <span>2024.03.09</span>
            <ArrowRightIcon height={15} width={15} />
            <span>2024.03.10</span>
          </div>
        </div>
      </div>
    </section>
  )
}