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

import Divider from "@/components/TempDesignSystem/Divider"
import SidePeek from "@/components/TempDesignSystem/SidePeek"
import { getIntl } from "@/i18n"

import ContactInformation from "./ContactInformation"

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

import { SidepeekSlugs } from "@/types/components/hotelPage/hotelPage"
import type { AboutTheHotelSidePeekProps } from "@/types/components/hotelPage/sidepeek/aboutTheHotel"

export default async function AboutTheHotelSidePeek({
  hotelAddress,
  coordinates,
  contact,
  socials,
  ecoLabels,
  descriptions,
}: AboutTheHotelSidePeekProps) {
  const intl = await getIntl()

  return (
    <SidePeek
      contentKey={SidepeekSlugs.about}
      title={intl.formatMessage({
        defaultMessage: "About the hotel",
      })}
    >
      <section className={styles.wrapper}>
        <ContactInformation
          hotelAddress={hotelAddress}
          coordinates={coordinates}
          contact={contact}
          socials={socials}
          ecoLabels={ecoLabels}
        />
        <Divider color="baseSurfaceSubtleHover" />

        {descriptions.descriptions ? (
          <Typography variant="Body/Lead text">
            <p className={styles.paragraph}>
              {descriptions.descriptions.medium}
            </p>
          </Typography>
        ) : null}
        <Typography variant="Body/Paragraph/mdRegular">
          <p className={styles.paragraph}>{descriptions.facilityInformation}</p>
        </Typography>
        <Typography variant="Body/Paragraph/mdRegular">
          <p className={styles.paragraph}>
            {descriptions.surroundingInformation}
          </p>
        </Typography>
      </section>
    </SidePeek>
  )
}
