"use client"

import { useParams } from "next/navigation"
import { useIntl } from "react-intl"

import Dialog from "@/components/Dialog"
import { ChevronRightSmallIcon } from "@/components/Icons"
import Button from "@/components/TempDesignSystem/Button"

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

export function UnlinkSAS() {
  const intl = useIntl()
  const params = useParams<LangParams>()

  return (
    <Dialog
      titleText={intl.formatMessage({
        id: "Are you sure you want to unlink your account?",
      })}
      // TODO update copy
      bodyText={intl.formatMessage({
        id: "We could not connect your accounts to give you access. Please contact us and we’ll help you resolve this issue.",
      })}
      cancelButtonText={intl.formatMessage({ id: "Go back" })}
      proceedText={intl.formatMessage({ id: "Yes, unlink my accounts" })}
      proceedHref={`/${params.lang}/sas-x-scandic/login?intent=unlink`}
      trigger={
        <Button intent="text" theme="base">
          {intl.formatMessage({ id: "Unlink accounts" })}
          <ChevronRightSmallIcon color="burgundy" />
        </Button>
      }
    />
  )
}