"use client"

import { useRouter, useSearchParams } from "next/navigation"
import { useIntl } from "react-intl"

import { AlertTypeEnum } from "@scandic-hotels/trpc/types/alert"

import { DTMC_SUCCESS_BANNER_KEY } from "@/constants/dtmc"

import Alert from "@/components/TempDesignSystem/Alert"

export default function DigitalTeamMemberCardAlert() {
  const intl = useIntl()
  const router = useRouter()
  const searchParams = useSearchParams()

  function removeSearchParam() {
    const params = new URLSearchParams(searchParams)
    params.delete(DTMC_SUCCESS_BANNER_KEY)
    router.replace(`${window.location.pathname}?${params.toString()}`)
  }

  if (searchParams.get(DTMC_SUCCESS_BANNER_KEY) !== "true") {
    return null
  }

  return (
    <Alert
      variant="inline"
      type={AlertTypeEnum.Success}
      heading={intl.formatMessage({
        defaultMessage: "Team Member Card added",
      })}
      text={intl.formatMessage({
        defaultMessage:
          "Access your Team Member Card here on My Pages Overview.",
      })}
      close={removeSearchParam}
    />
  )
}