import Link from "@/components/TempDesignSystem/Link"
import Title from "@/components/Title"

import HowItWorks from "./HowItWorks"
import LoyaltyLevels from "./LoyaltyLevels"
import OverviewTable from "./OverviewTable"

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

import type {
  DynamicComponentProps,
  DynamicContentProps,
} from "@/types/components/loyalty/blocks"
import { LoyaltyComponentEnum } from "@/types/components/loyalty/enums"

function DynamicComponentBlock({ component }: DynamicComponentProps) {
  switch (component) {
    case LoyaltyComponentEnum.how_it_works:
      return <HowItWorks />
    case LoyaltyComponentEnum.loyalty_levels:
      return <LoyaltyLevels />
    case LoyaltyComponentEnum.overview_table:
      // TODO: IMPLEMENT OVERVIEW TABLE!
      return <OverviewTable />
    default:
      return null
  }
}

export default function DynamicContent({
  dynamicContent,
}: DynamicContentProps) {
  return (
    <section className={styles.container}>
      <header className={styles.titleContainer}>
        {dynamicContent.title && (
          <Title
            as="h3"
            level="h2"
            className={styles.title}
            weight="semiBold"
            uppercase
          >
            {dynamicContent.title}
          </Title>
        )}
        {dynamicContent.link ? (
          <Link className={styles.link} href={dynamicContent.link.href}>
            {dynamicContent.link.text}
          </Link>
        ) : null}
        {dynamicContent.subtitle && (
          <Title
            as="h5"
            level="h3"
            weight="regular"
            className={styles.subtitle}
          >
            {dynamicContent.subtitle}
          </Title>
        )}
      </header>
      <div>
        <DynamicComponentBlock component={dynamicContent.component} />
      </div>
    </section>
  )
}