apps/web/src/components/DonationWallets.tsx

import React from 'react'
import DonationWalletCard from './DonationWalletCard'
import type { DonationWallet } from '@/lib/donations'

export default function DonationWallets({
  wallets,
}: {
  wallets: DonationWallet[]
}) {
  if (!wallets.length) {
    return (
      <div className="rounded-sm border border-border bg-panel p-7 text-center">
        <span
          className="mx-auto block h-2 w-2 rounded-full bg-accent"
          aria-hidden="true"
        />
        <p className="mt-4 font-serif text-lg font-semibold text-ink">
          Canal em configuração
        </p>
        <p className="mx-auto mt-2 max-w-xl text-sm leading-relaxed text-muted">
          O canal de contribuições em criptoativos está sendo configurado.
          Nenhum endereço será exibido antes de ser validado.
        </p>
      </div>
    )
  }

  return (
    <div className="grid gap-5">
      {wallets.map((wallet) => (
        <DonationWalletCard
          key={`${wallet.symbol}:${wallet.network}:${wallet.address}`}
          wallet={wallet}
        />
      ))}
    </div>
  )
}