import { useStore } from '@nanostores/react';
import { currentAccount } from '@stores/transactionStore';
import TransactionTable from './TransactionTable';

export default function MainContent() {
  const account = useStore(currentAccount);

  if (!account) {
    return (
      <main className="main-content">
        <header className="main-header">
          <h1>No account selected</h1>
        </header>
        <div className="no-account">
          Please select an account from the sidebar to view transactions.
        </div>
      </main>
    );
  }

  return (
    <main className="main-content">
      <header className="main-header">
        <h1>
          Transactions for{' '}
          <span id="current-account-name">
            {account.name} (***{account.accountNumber.slice(-3)})
          </span>
        </h1>
      </header>
      <TransactionTable />
    </main>
  );
}