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

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

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

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

  const deleteCreditCardMutation = trpc.user.creditCard.delete.useMutation({
    onSuccess() {
      trpcUtils.user.creditCards.invalidate()
      toast.success(formatMessage({ id: "Credit card deleted successfully" }))
    },
    onError() {
      toast.error(
        formatMessage({
          id: "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}>
      <Delete color="burgundy" />
    </Button>
  )
}