import ButtonLink from "@/components/ButtonLink"
import SidePeek from "@/components/TempDesignSystem/SidePeek"
import Body from "@/components/TempDesignSystem/Text/Body"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"
import { appendSlugToPathname } from "@/utils/appendSlugToPathname"

import SidePeekImages from "../Images"
import { getConferenceRoomTexts } from "./util"

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

import { SidepeekSlugs } from "@/types/components/hotelPage/hotelPage"
import type { MeetingsAndConferencesSidePeekProps } from "@/types/components/hotelPage/sidepeek/meetingsAndConferences"

export default async function MeetingsAndConferencesSidePeek({
  meetingFacilities,
  descriptions,
  meetingRooms,
  meetingPageUrl,
  heading,
}: MeetingsAndConferencesSidePeekProps) {
  const intl = await getIntl()
  const { seatingText, roomText } = await getConferenceRoomTexts(meetingRooms)
  const visibleImages = meetingFacilities?.heroImages.slice(0, 2)
  const meetingPageHref = await appendSlugToPathname(meetingPageUrl)

  return (
    <SidePeek contentKey={SidepeekSlugs.meetings} title={heading}>
      <div className={styles.wrapper}>
        <Subtitle color="burgundy" asChild>
          <Title level="h3">
            {intl.formatMessage({
              defaultMessage: "Creative spaces for meetings",
            })}
          </Title>
        </Subtitle>
        {visibleImages?.length ? (
          <SidePeekImages images={visibleImages} />
        ) : null}
        {descriptions?.medium && (
          <Body color="uiTextHighContrast">{descriptions.medium}</Body>
        )}
        {roomText || seatingText ? (
          <Body color="uiTextMediumContrast">
            {roomText}
            {roomText && seatingText && <br />}
            {seatingText}
          </Body>
        ) : null}

        {meetingPageHref ? (
          <div className={styles.buttonContainer}>
            <ButtonLink
              variant="Secondary"
              color="Primary"
              size="Medium"
              href={meetingPageHref}
              typography="Body/Paragraph/mdBold"
            >
              {intl.formatMessage({
                defaultMessage: "Read more",
              })}
            </ButtonLink>
          </div>
        ) : null}
      </div>
    </SidePeek>
  )
}
