import { Temp } from "@scandic-hotels/booking-flow/test-entry"
import { Lang } from "@scandic-hotels/common/constants/language"
import { Typography } from "@scandic-hotels/design-system/Typography"

import { serverClient } from "@/lib/trpc"

import { getIntl } from "../i18n"
import { ClientComponent } from "./ClientComponent"

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

export default async function Home() {
  const intl = await getIntl()
  const caller = await serverClient()
  const destinations = await caller.autocomplete.destinations({
    lang: Lang.en,
    includeTypes: ["hotels"],
    query: "Göteborg",
  })
  const hotel = destinations.hits.hotels[0].name

  return (
    <div className={styles.page}>
      <main>
        <Typography variant="Title/Decorative/lg">
          {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
          <p>hello world with data: {hotel}</p>
        </Typography>
        <Typography>
          <p>{intl.formatMessage({ defaultMessage: "Map of the city" })}</p>
        </Typography>
        <hr />
        <ClientComponent />
        <hr />
        <Typography>
          {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
          <p>from booking-flow package:</p>
        </Typography>
        <Temp />
      </main>
    </div>
  )
}