"use client"

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

import { AlertTypeEnum } from "@scandic-hotels/common/constants/alert"
import { Alert } from "@scandic-hotels/design-system/Alert"

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

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({
        id: "myPages.teamMemberCardAdded",
        defaultMessage: "Team Member Card added",
      })}
      text={intl.formatMessage({
        id: "myPages.accessYourTeamMemberCard",
        defaultMessage:
          "Access your Team Member Card here on My Pages Overview.",
      })}
      close={removeSearchParam}
    />
  )
}
