import { AccountCard } from './AccountCard';

interface Account {
  id: string;
  jid: string;
  displayName: string | null;
  status: string;
  platform: string;
}

export default async function AccountsPage() {
  const apiUrl = process.env.API_URL ?? 'http://localhost:3001';
  let accounts: Account[] = [];
  try {
    const res = await fetch(`${apiUrl}/accounts`, { cache: 'no-store' });
    if (res.ok) accounts = await res.json();
  } catch {}

  return (
    <div className="max-w-2xl">
      <h1 className="text-xl font-semibold mb-6">Accounts</h1>
      {accounts.length === 0 ? (
        <p className="text-gray-500">No accounts found.</p>
      ) : (
        <div className="flex flex-col gap-3">
          {accounts.map((a) => (
            <AccountCard key={a.id} account={a} />
          ))}
        </div>
      )}
    </div>
  );
}