import SectionContainer from "@/components/Section/Container"
import SectionHeader from "@/components/Section/Header"
import SectionLink from "@/components/Section/Link"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import Title from "@/components/TempDesignSystem/Text/Title"

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

import type { DynamicContentProps } from "@/types/components/blocks/dynamicContent"
import { DynamicContentEnum } from "@/types/enums/dynamicContent"

export default function SectionWrapper({
  children,
  dynamic_content,
  firstItem,
}: React.PropsWithChildren<DynamicContentProps>) {
  const displayHeader = !!(
    dynamic_content.link ||
    dynamic_content.subtitle ||
    dynamic_content.title
  )
  const isOverviewTable =
    dynamic_content.component ===
    DynamicContentEnum.Blocks.components.overview_table
  return (
    <SectionContainer className={styles.container}>
      {isOverviewTable ? (
        <div className={styles.header}>
          <Title className={styles.tableTitle}> {dynamic_content.title}</Title>
          <Subtitle>{dynamic_content.subtitle}</Subtitle>
        </div>
      ) : displayHeader ? (
        <SectionHeader
          link={dynamic_content.link}
          preamble={dynamic_content.subtitle}
          title={dynamic_content.title}
          topTitle={firstItem}
        />
      ) : null}
      {children}
      {displayHeader ? (
        <SectionLink link={dynamic_content.link} variant="mobile" />
      ) : null}
    </SectionContainer>
  )
}