web/packages/booking-flow/lib/components/EnterDetails/Section/index.tsx

"use client"
import { useEffect, useState } from "react"
import { useIntl } from "react-intl"

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

import { useRoomContext } from "../../../contexts/EnterDetails/RoomContext"
import { EnterDetailsStepEnum } from "../../../stores/enter-details/enterDetailsStep"

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

type SectionProps = {
  header: string
  label: string
  additionalInfo?: string | null
  step: EnterDetailsStepEnum
  disabled?: boolean
}

export default function Section({
  children,
  header,
  label,
  additionalInfo,
  step,
  disabled,
}: React.PropsWithChildren<SectionProps>) {
  const intl = useIntl()

  const {
    room: { bedType, breakfast },
  } = useRoomContext()

  const [title, setTitle] = useState(label)

  const noBreakfastTitle = intl.formatMessage({
    defaultMessage: "No breakfast",
  })
  const breakfastTitle = intl.formatMessage({
    defaultMessage: "Breakfast buffet",
  })

  useEffect(() => {
    if (step === EnterDetailsStepEnum.selectBed && bedType) {
      setTitle(bedType.description)
    }
    // If breakfast step, check if an option has been selected
    if (step === EnterDetailsStepEnum.breakfast && breakfast !== undefined) {
      if (breakfast === false) {
        setTitle(noBreakfastTitle)
      } else {
        setTitle(breakfastTitle)
      }
    }
  }, [bedType, breakfast, setTitle, step, breakfastTitle, noBreakfastTitle])

  return (
    <div
      className={`${styles.section} ${disabled ? styles.disabled : ""}`}
      data-step={step}
    >
      <header className={styles.header}>
        <Typography variant="Title/Overline/sm">
          <h2 data-at-id="details-section-heading" className={styles.heading}>
            {header}
          </h2>
        </Typography>
        <Typography variant="Title/Subtitle/md">
          <p
            data-at-id="details-section-subheading"
            className={styles.subheading}
          >
            {title}
          </p>
        </Typography>
        {additionalInfo ? (
          <Typography variant="Body/Paragraph/mdRegular">
            <p className={styles.additionalInfo}>{additionalInfo}</p>
          </Typography>
        ) : null}
      </header>
      <div className={styles.content}>
        <div className={styles.contentWrapper}>{children}</div>
      </div>
    </div>
  )
}