/* eslint-disable formatjs/no-literal-string-in-jsx */
"use client"
import { useIntl } from "react-intl"

import { Lang } from "@scandic-hotels/common/constants/language"
import { trpc } from "@scandic-hotels/trpc/client"

export function ClientComponent() {
  const intl = useIntl()
  const { data, isLoading } = trpc.autocomplete.destinations.useQuery({
    lang: Lang.en,
    includeTypes: ["hotels"],
    query: "Malmö",
  })

  return (
    <div>
      <p>client component</p>
      <p>Data: {JSON.stringify(data?.hits?.hotels[0]?.name)}</p>
      <p>Is loading: {isLoading ? "Yes" : "No"}</p>
      <p>Translated text: </p>
      {intl.formatMessage({
        defaultMessage: "All-day breakfast",
      })}
    </div>
  )
}