"use client"

import React from "react"

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

import CreditCardRow from "../CreditCardRow"

import styles from "./CreditCardList.module.css"

import type { CreditCard } from "@/types/user"

export default function CreditCardList({
  initialData,
}: {
  initialData?: CreditCard[] | null
}) {
  const creditCards = trpc.user.creditCards.useQuery(undefined, { initialData })

  if (!creditCards.data || !creditCards.data.length) {
    return null
  }

  return (
    <div className={styles.cardContainer}>
      {creditCards.data.map((card) => (
        <CreditCardRow key={card.id} card={card} />
      ))}
    </div>
  )
}