import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"

import ButtonLink from "@/components/ButtonLink"
import { getIntl } from "@/i18n"
import { getSingleDecimal } from "@/utils/numberFormatting"

import TripAdvisorLink from "./TripAdvisorLink"

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

import { SidepeekSlugs } from "@/types/components/hotelPage/hotelPage"
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(
    {
      defaultMessage: "{number} km to city center",
    },
    { number: getSingleDecimal(distanceToCentre / 1000) }
  )

  const formattedLocationText = `${streetAddress}, ${city} (${formattedDistanceText})`

  return (
    <section className={styles.introSection}>
      <div className={styles.mainContent}>
        <div className={styles.titleContainer}>
          <Typography variant="Title/Decorative/lg">
            <span className={styles.script}>
              {intl.formatMessage({
                defaultMessage: "Welcome to",
              })}
            </span>
          </Typography>
          <Typography variant="Title/lg">
            <h1 className={styles.title}>{hotelName}</h1>
          </Typography>
        </div>
        <Typography variant="Body/Supporting text (caption)/smRegular">
          <p className={styles.bodyText}>{formattedLocationText}</p>
        </Typography>

        {tripAdvisor ? <TripAdvisorLink tripAdvisor={tripAdvisor} /> : null}
      </div>
      <div className={styles.subtitleContent}>
        <Typography variant="Body/Lead text">
          <p>{hotelDescription}</p>
        </Typography>
        <ButtonLink
          href={`?s=${SidepeekSlugs.about}`}
          variant="Text"
          typography="Body/Paragraph/mdBold"
          scroll={false}
        >
          {intl.formatMessage({
            defaultMessage: "See hotel details",
          })}
          <MaterialIcon icon="chevron_right" size={24} color="CurrentColor" />
        </ButtonLink>
      </div>
    </section>
  )
}
