"use client"
import { useIntl } from "react-intl"

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

import { trpc } from "@/lib/trpc/client"

import Button from "@/components/TempDesignSystem/Button"
import { toast } from "@/components/TempDesignSystem/Toasts"

export default function DeleteCreditCardButton({
  creditCardId,
}: {
  creditCardId: string
}) {
  const intl = useIntl()
  const trpcUtils = trpc.useUtils()

  const deleteCreditCardMutation = trpc.user.creditCard.delete.useMutation({
    onSuccess() {
      trpcUtils.user.creditCards.invalidate()
      toast.success(
        intl.formatMessage({
          defaultMessage: "Credit card deleted successfully",
        })
      )
    },
    onError() {
      toast.error(
        intl.formatMessage({
          defaultMessage:
            "Failed to delete credit card, please try again later.",
        })
      )
    },
  })
  async function handleDelete() {
    deleteCreditCardMutation.mutate({ creditCardId })
  }
  return (
    <Button variant="icon" theme="base" intent="text" onClick={handleDelete}>
      <MaterialIcon icon="remove" color="CurrentColor" />
    </Button>
  )
}
