web/apps/scandic-web/components/HotelReservation/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/Details/Room"

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

import type { SectionProps } from "@/types/components/hotelReservation/enterDetails/section"
import { StepEnum } from "@/types/enums/step"

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 === StepEnum.selectBed && bedType) {
      setTitle(bedType.description)
    }
    // If breakfast step, check if an option has been selected
    if (step === StepEnum.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 className={styles.heading}>{header}</h2>
        </Typography>
        <Typography variant="Title/Subtitle/md">
          <p 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>
  )
}