import { about } from "@/constants/routes/hotelPageParams"

import { ChevronRightSmallIcon } from "@/components/Icons"
import TripAdvisorIcon from "@/components/Icons/TripAdvisor"
import Link from "@/components/TempDesignSystem/Link"
import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
import Body from "@/components/TempDesignSystem/Text/Body"
import Preamble from "@/components/TempDesignSystem/Text/Preamble"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext"

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

import type { IntroSectionProps } from "./types"

export default async function IntroSection({
  hotelName,
  hotelDescription,
  location,
  address,
  tripAdvisor,
}: IntroSectionProps) {
  const intl = await getIntl()
  const { streetAddress, city } = address
  const { distanceToCentre } = location
  const formattedDistanceText = intl.formatMessage(
    { id: "Distance in km to city centre" },
    { number: distanceToCentre }
  )
  const lang = getLang()
  const formattedLocationText = `${streetAddress}, ${city} (${formattedDistanceText})`
  const hasTripAdvisorData = !!(
    tripAdvisor?.rating &&
    tripAdvisor?.numberOfReviews &&
    tripAdvisor?.webUrl
  )
  const formattedTripAdvisorText = hasTripAdvisorData
    ? intl.formatMessage(
        { id: "Tripadvisor reviews" },
        { rating: tripAdvisor.rating, count: tripAdvisor.numberOfReviews }
      )
    : ""

  return (
    <section className={styles.introSection}>
      <div className={styles.mainContent}>
        <div className={styles.titleContainer}>
          <BiroScript tilted="medium" color="red">
            {intl.formatMessage({ id: "Welcome to" })}
          </BiroScript>
          <Title level="h2">{hotelName}</Title>
        </div>
        <Body color="textMediumContrast">{formattedLocationText}</Body>
        {hasTripAdvisorData && (
          <Link
            className={styles.introLink}
            target="_blank"
            variant="icon"
            textDecoration="underline"
            color="peach80"
            href={tripAdvisor.webUrl}
          >
            <TripAdvisorIcon color="peach80" />
            {formattedTripAdvisorText}
          </Link>
        )}
      </div>
      <div className={styles.subtitleContent}>
        <Preamble>{hotelDescription}</Preamble>
        <Link
          className={styles.introLink}
          color="burgundy"
          variant="icon"
          href={`?s=${about[lang]}`}
          scroll={false}
        >
          {intl.formatMessage({ id: "Read more about the hotel" })}
          <ChevronRightSmallIcon color="burgundy" />
        </Link>
      </div>
    </section>
  )
}
