"use client"

import { useState } from "react"
import { TradesHeader } from "@/components/trade-accounts-header"
import { TradeAccounts } from "@/components/trade-accounts"

import type { TradingAccountExtra } from "@/lib/journal/daily-pnl";
import type { TradingAccountType } from "@/generated/prisma/client";

export function AccountsView({
  accounts = [],
  cursor,
  orderBy,
  order,
  query,
  count,
  queryCount,
  types,
  currencies,
  brokers,
  filter,
}: {
  accounts: TradingAccountExtra[];
  cursor?: string;
  orderBy?: string;
  order?: 'asc' | 'desc';
  query?: string;
  count?: number;
  queryCount?: number;
  types?: TradingAccountType[];
  currencies?: string[];
  brokers?: string[];
  filter?: {
    broker?: string;
    type?: TradingAccountType;
    currency?: string;
  };
}) {
  const [newAccounts, setNewAccounts] = useState<any[]>([]);

  return (
    <div className="space-y-6">
      <TradesHeader setNewAccountsAction={setNewAccounts} />
      <TradeAccounts
        accounts={[...newAccounts, ...accounts].slice(0, 20)}
        cursor={cursor}
        count={count}
        queryCount={queryCount}
        query={query}
        filter={filter}
        order={order}
        orderBy={orderBy}
        types={types}
        currencies={currencies}
        brokers={brokers}
      />
    </div>
  )
}