import { CheckCircleIcon, ChevronDownIcon } from "@/components/Icons"
import Button from "@/components/TempDesignSystem/Button"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import { getIntl } from "@/i18n"

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

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

export default async function SectionAccordion({
  header,
  selection,
  path,
  children,
}: React.PropsWithChildren<SectionAccordionProps>) {
  const intl = await getIntl()

  return (
    <div className={styles.wrapper}>
      <div className={styles.top}>
        <div>
          <CheckCircleIcon color={selection ? "green" : "pale"} />
        </div>
        <div className={styles.header}>
          <Caption color={"burgundy"} asChild>
            <h2>{header}</h2>
          </Caption>
          {(Array.isArray(selection) ? selection : [selection]).map((s) => (
            <Body key={s} className={styles.selection} color={"burgundy"}>
              {s}
            </Body>
          ))}
        </div>
        {selection && (
          <Button intent="secondary" size="small" asChild>
            <Link href={path}>{intl.formatMessage({ id: "Modify" })}</Link>
          </Button>
        )}
        <div>
          <ChevronDownIcon />
        </div>
      </div>
      {children}
    </div>
  )
}
