import { Suspense } from "react"

import { Section } from "@/components/Section"
import SectionHeader from "@/components/Section/Header/Deprecated"
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) {
  const lang = await getLang()

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