web/packages/design-system/lib/components/HotelInfoCard/HotelDescription/index.tsx

"use client"

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

import { FacilityToIcon } from "../..//FacilityToIcon"
import { Typography } from "../../Typography"

import styles from "./hotelDescription.module.css"
import { FacilityEnum } from "@scandic-hotels/common/constants/facilities"

export default function HotelDescription({
  description,
  facilities,
}: {
  description?: string
  facilities: {
    id: FacilityEnum
    name: string
  }[]
}) {
  const intl = useIntl()

  const [expanded, setExpanded] = useState(false)

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

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

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

  return (
    <div className={styles.descriptionWrapper}>
      <div className={styles.facilityList}>
        {facilities?.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>
      <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>
  )
}