web/components/HotelReservation/EnterDetails/SectionAccordion/index.tsx

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

import { useEnterDetailsStore } from "@/stores/enter-details"

import { CheckIcon, ChevronDownIcon } from "@/components/Icons"
import Button from "@/components/TempDesignSystem/Button"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"

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

import { SectionAccordionProps } from "@/types/components/hotelReservation/selectRate/sectionAccordion"

export default function SectionAccordion({
  header,
  label,
  step,
  children,
}: React.PropsWithChildren<SectionAccordionProps>) {
  const intl = useIntl()
  const currentStep = useEnterDetailsStore((state) => state.currentStep)
  const [isComplete, setIsComplete] = useState(false)
  const [isOpen, setIsOpen] = useState(false)

  const isValid = useEnterDetailsStore((state) => state.isValid[step])
  const navigate = useEnterDetailsStore((state) => state.navigate)

  useEffect(() => {
    // We need to set the state on mount because of hydration errors
    setIsComplete(isValid)
  }, [isValid])

  useEffect(() => {
    setIsOpen(currentStep === step)
  }, [currentStep, step])

  function onModify() {
    navigate(step)
  }

  return (
    <section className={styles.wrapper} data-open={isOpen} data-step={step}>
      <div className={styles.iconWrapper}>
        <div className={styles.circle} data-checked={isComplete}>
          {isComplete ? (
            <CheckIcon color="white" height="16" width="16" />
          ) : null}
        </div>
      </div>
      <div className={styles.main}>
        <header className={styles.headerContainer}>
          <div>
            <Footnote
              asChild
              textTransform="uppercase"
              type="label"
              color="uiTextPlaceholder"
            >
              <h2>{header}</h2>
            </Footnote>
            <Subtitle
              type="two"
              className={styles.selection}
              color="uiTextHighContrast"
            >
              {label}
            </Subtitle>
          </div>
          {isComplete && !isOpen && (
            <Button
              onClick={onModify}
              theme="base"
              size="small"
              variant="icon"
              intent="text"
              wrapping
            >
              {intl.formatMessage({ id: "Modify" })}{" "}
              <ChevronDownIcon color="burgundy" />
            </Button>
          )}
        </header>
        <div className={styles.content}>{children}</div>
      </div>
    </section>
  )
}