web/apps/scandic-web/components/HotelReservation/SelectRate/HotelInfoCard/HotelDescription/index.tsx

"use client"

import { useState } from "react"
import { Button as ButtonRAC } from "react-aria-components"
import { useIntl } from "react-intl"

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

import { FacilityToIcon } from "@/components/ContentType/HotelPage/data"
import ReadMore from "@/components/HotelReservation/ReadMore"
import Alert from "@/components/TempDesignSystem/Alert"

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

import type { Hotel } from "@scandic-hotels/trpc/types/hotel"

import { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek"

export default function HotelDescription({
  description,
  hotel,
  sortedFacilities,
}: {
  description?: string
  hotel: Hotel
  sortedFacilities: Hotel["detailedFacilities"]
}) {
  const intl = useIntl()

  const [expanded, setExpanded] = useState(false)

  const handleToggle = () => {
    setExpanded((prev) => !prev)
  }

  const textShowMore = intl.formatMessage({
    defaultMessage: "Show more",
  })

  const textShowLess = intl.formatMessage({
    defaultMessage: "Show less",
  })

  return (
    <div className={styles.descriptionWrapper}>
      <div className={styles.facilityList}>
        {sortedFacilities?.map((facility) => (
          <div className={styles.facilitiesItem} key={facility.id}>
            <FacilityToIcon id={facility.id} color="Icon/Default" />
            <Typography variant="Body/Supporting text (caption)/smRegular">
              <p>{facility.name}</p>
            </Typography>
          </div>
        ))}
      </div>
      <div>
        <Typography variant="Body/Paragraph/mdRegular">
          <p
            className={`${styles.hotelDescription} ${
              expanded ? styles.expanded : styles.collapsed
            }`}
          >
            {description}
          </p>
        </Typography>
        <Typography variant="Link/md">
          <ButtonRAC className={styles.showMoreButton} onPress={handleToggle}>
            {expanded ? textShowLess : textShowMore}
          </ButtonRAC>
        </Typography>
        <div className={styles.expandedContent}>
          <ReadMore
            label={intl.formatMessage({
              defaultMessage: "See all amenities",
            })}
            hotelId={hotel.operaId}
            showCTA={false}
            sidePeekKey={SidePeekEnum.hotelDetails}
          />
        </div>
      </div>

      {hotel.specialAlerts.map((alert) => (
        <Alert
          key={alert.id}
          type={alert.type}
          heading={alert.heading}
          text={alert.text}
        />
      ))}
    </div>
  )
}