import { Button } from '@scandic-hotels/design-system/Button'
import { Typography } from '@scandic-hotels/design-system/Typography'

import { Hero } from './Hero'

import styles from './hotel-page.module.css'

export function HotelPage() {
  return (
    <div className={styles.page}>
      <Hero />
      <div className={styles.intro}>
        <Typography variant="Title/lg">
          <h1>Scandic Helsinki Hub</h1>
        </Typography>
        <Typography variant="Body/Supporting text (caption)/smRegular">
          <p>Annankatu 18, Helsinki (0km to city centre)</p>
        </Typography>
        <Typography variant="Body/Supporting text (caption)/smRegular">
          <a href="#">4.1 (95 reviews on tripadvisor)</a>
        </Typography>
      </div>
      <div className={styles.preamble}>
        <Typography variant="Body/Paragraph/mdRegular">
          <p>
            Modern urban hotel in a impressive 1920s printing house next to the
            Old Church Park in Helsinki city centre. Loft-style rooms, an
            inviting restaurant area and inspiring setting for a relaxed stay.
          </p>
        </Typography>
        <span>
          <Button variant="Text" typography="Body/Paragraph/mdBold">
            Read more about the hotel
          </Button>
        </span>
      </div>
    </div>
  )
}