import { Suspense } from "react"

import { env } from "@/env/server"

import SectionContainer from "@/components/Section/Container"
import SectionHeader from "@/components/Section/Header"
import SectionLink from "@/components/Section/Link"
import { getLang } from "@/i18n/serverContext"

import {
  TransferPointsForm,
  TransferPointsFormSkeleton,
} from "./TransferPointsForm"

type Props = {
  title?: string
  link?: { href: string; text: string }
  subtitle?: string
}

export default async function SASTransferPoints({
  title,
  subtitle,
  link,
}: Props) {
  if (!env.SAS_ENABLED || !env.SAS_POINT_TRANSFER_ENABLED) {
    return null
  }

  const lang = getLang()

  return (
    <SectionContainer>
      <SectionHeader link={link} preamble={subtitle} title={title} />
      <SectionLink link={link} variant="mobile" />
      <Suspense fallback={<TransferPointsFormSkeleton lang={lang} />}>
        <TransferPointsForm lang={lang} />
      </Suspense>
    </SectionContainer>
  )
}