"use client"

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

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

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({
        id: "Are you sure you want to unlink your account?",
      })}
      bodyText={intl.formatMessage({
        id: "This will remove any membership level upgrades gained from the linking.",
      })}
      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" })}
          <MaterialIcon icon="chevron_right" size={20} color="CurrentColor" />
        </Button>
      }
    />
  )
}