import React from "react"

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

import CheckCircle from "@/components/Icons/CheckCircle"
import { Redirect } from "@/components/Redirect"
import Body from "@/components/TempDesignSystem/Text/Body"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"

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

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

export default async function SASxScandicUnlinkSuccessPage({
  params,
}: PageArgs<LangParams>) {
  const intl = await getIntl()

  return (
    <SASModal>
      <Redirect url={overview[params.lang]} timeout={3000} />
      <CheckCircle height={64} width={64} color="uiSemanticSuccess" />
      <Title as="h2" level="h1" textAlign="center">
        {intl.formatMessage({ id: "Your accounts are now unlinked" })}
      </Title>
      <div>
        <Body textAlign="center">
          {intl.formatMessage({
            id: "Redirecting you to My Pages.",
          })}
        </Body>
      </div>
    </SASModal>
  )
}
