"use client"

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

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

import { AlertTypeEnum } from "@/types/enums/alert"

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

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

  if (searchParams.get("card_added") !== "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}
    />
  )
}