web/apps/scandic-web/components/Blocks/Accordion/index.tsx

"use client"

import { cx } from "class-variance-authority"
import { useState } from "react"

import Accordion from "@scandic-hotels/design-system/Accordion"
import AccordionItem from "@scandic-hotels/design-system/Accordion/AccordionItem"
import { JsonToHtml } from "@scandic-hotels/design-system/JsonToHtml"
import { ShowMoreButton } from "@scandic-hotels/design-system/ShowMoreButton"

import { Section } from "@/components/Section"
import { SectionHeader } from "@/components/Section/Header"

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

import type { AccordionProps } from "@/types/components/blocks/Accordion"
import { HotelHashValues } from "@/types/enums/hotelPage"

export default function AccordionSection({ accordion, title }: AccordionProps) {
  const showToggleButton = accordion.length > 5
  const [allAccordionsVisible, setAllAccordionsVisible] =
    useState(!showToggleButton)

  function toggleAccordions() {
    setAllAccordionsVisible((state) => !state)
  }

  return (
    <Section className={styles.accordionSection} id={HotelHashValues.faq}>
      <SectionHeader heading={title} typography="Title/md" />
      <Accordion
        className={cx(styles.accordion, {
          [styles.allVisible]: allAccordionsVisible,
        })}
      >
        {accordion.map((acc) =>
          acc ? (
            <AccordionItem key={acc.question} title={acc.question}>
              <JsonToHtml
                embeds={acc.answer.embedded_itemsConnection.edges}
                nodes={acc.answer.json.children}
              />
            </AccordionItem>
          ) : null
        )}
      </Accordion>

      {showToggleButton ? (
        <ShowMoreButton
          loadMoreData={toggleAccordions}
          showLess={allAccordionsVisible}
        />
      ) : null}
    </Section>
  )
}