"use client"

import { useIntl } from "react-intl"

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

import { PlusCircleIcon } from "@/components/Icons"
import Button from "@/components/TempDesignSystem/Button"

export default function AddCreditCardButton() {
  const { formatMessage } = useIntl()

  async function handleAddCreditCard() {
    // TODO: initiate add credit card flow and redirect user to planet:
    // const { url } = trpc.user.creditCard.add.useMutation()
    // router.redirect(url)
    console.log("Credit card added!")
  }
  return (
    <Button
      variant="icon"
      theme="base"
      intent="text"
      onClick={handleAddCreditCard}
      wrapping
    >
      <PlusCircleIcon color="burgundy" />
      {formatMessage({ id: "Add new card" })}
    </Button>
  )
}