import React from "react"

import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"

import { partnerSas } from "@/constants/routes/myPages"

import { Redirect } from "@/components/Redirect"
import { getIntl } from "@/i18n"

import { SASModal } from "../../components/SASModal"

import type { LangParams, PageArgs } from "@/types/params"

export default async function SASxScandicLinkPage(props: PageArgs<LangParams>) {
  const params = await props.params;
  const intl = await getIntl()

  return (
    <SASModal>
      <Redirect url={partnerSas[params.lang]} timeout={3000} />
      <MaterialIcon
        icon="check_circle"
        size={64}
        color="Icon/Feedback/Success"
      />
      <Typography variant="Title/Subtitle/lg">
        <h1>
          {intl.formatMessage({
            defaultMessage: "Your accounts are linked",
          })}
        </h1>
      </Typography>
      <div>
        <Typography variant="Body/Paragraph/mdRegular">
          <p>
            {intl.formatMessage({
              defaultMessage: "We successfully connected your accounts!",
            })}
          </p>
        </Typography>
        <Typography variant="Body/Paragraph/mdRegular">
          <p>
            {intl.formatMessage({
              defaultMessage: "Redirecting you to My Pages.",
            })}
          </p>
        </Typography>
      </div>
    </SASModal>
  )
}
