"use client"

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

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

import Dialog from "@/components/Dialog"
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({
        defaultMessage: "Are you sure you want to unlink your account?",
      })}
      bodyText={intl.formatMessage({
        defaultMessage:
          "This will remove any membership level upgrades gained from the linking. You can re-link your accounts again in 30 days.",
      })}
      cancelButtonText={intl.formatMessage({
        defaultMessage: "Go back",
      })}
      proceedText={intl.formatMessage({
        defaultMessage: "Yes, unlink my accounts",
      })}
      proceedHref={`/${params.lang}/sas-x-scandic/login?intent=unlink`}
      trigger={
        <Button intent="text" theme="base">
          {intl.formatMessage({
            defaultMessage: "Unlink accounts",
          })}
          <MaterialIcon icon="chevron_right" size={20} color="CurrentColor" />
        </Button>
      }
    />
  )
}