foldbank-mock/web/app/components/CenterLoading.tsx

"use client"

import React from 'react'
import useSWR from 'swr'
import Dashboard from './Dashboard'
import BankAccounts from './BankAccounts'
import styles from './centerCol.module.css'


export default function CenterLoading() {
  const fetcher = (...args) => fetch(...args).then((res) => res.json())
  const { data, error } = useSWR(`https://api.foldbank.codingcoffee.me/api/v1/accounts/`, fetcher)

  if (error) return <div>Error: Failed to load</div>
  if (!data) return <div></div>

  const bankDetails = data.results

  return (
    <>
      <Dashboard bankDetails={bankDetails} />
      <div className={styles.accounts}>
        <BankAccounts bankDetails={bankDetails} />
      </div>
    </>
  )
}