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>
  )
}