Files
web/components/HotelReservation/SelectHotel/HotelCard/index.tsx
2024-07-10 11:31:46 +02:00

46 lines
1.6 KiB
TypeScript

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 { 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="" alt="hotel image" className={styles.image} />
<div className={styles.information}>
<header className={styles.title}>
<ScandicLogoIcon color="red" />
<Title as="h4">{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>
)
}