import { getGetServerSideProps } from '@/api/ssrApollo'
import Layout from '@/components/layout'
import styles from '@/styles/wallet.module.css'
import { WalletCard } from '@/components/wallet-card'
import { WALLETS } from '@/fragments/wallet'
import Link from 'next/link'

const wallets = [
  await import('@/components/webln/lnbits')
]

export const getServerSideProps = getGetServerSideProps({ query: WALLETS, authRequired: true })

export default function Wallet ({ ssrData }) {
  // TODO: set wallet status
  // TODO: load server wallets

  return (
    <Layout>
      <div className='py-5 w-100'>
        <h2 className='mb-2 text-center'>attach wallets</h2>
        <h6 className='text-muted text-center'>attach wallets to supplement your SN wallet</h6>
        <div className='text-center'>
          <Link href='/wallet/logs' className='text-muted fw-bold text-underline'>
            wallet logs
          </Link>
        </div>
        <div className={styles.walletGrid}>
          {wallets.map((w, i) => (
            <WalletCard key={i} {...w.config.card} />
          ))}
        </div>
      </div>
    </Layout>
  )
}