import { serverClient } from "@/lib/trpc/server"

import { auth } from "@/auth"
import Header from "@/components/MyPages/Blocks/Header"

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"

async function DynamicComponentBlock({ component }: DynamicComponentProps) {
  const session = await auth()

  const user = session ? await serverClient().user.get() : null

  switch (component) {
    case LoyaltyComponentEnum.how_it_works:
      return <HowItWorks />
    case LoyaltyComponentEnum.loyalty_levels:
      return <LoyaltyLevels />
    case LoyaltyComponentEnum.overview_table:
      return <OverviewTable user={user} />
    default:
      return null
  }
}

export default function DynamicContent({
  dynamicContent,
  firstItem,
}: DynamicContentProps) {
  const displayHeader = !!(
    dynamicContent.link ||
    dynamicContent.subtitle ||
    dynamicContent.title
  )

  return (
    <section className={styles.container}>
      {displayHeader ? (
        <Header
          link={dynamicContent.link}
          subtitle={dynamicContent.subtitle}
          title={dynamicContent.title}
          topTitle={firstItem}
        />
      ) : null}
      <DynamicComponentBlock component={dynamicContent.component} />
    </section>
  )
}