"use client"

import { trpc } from "@/lib/trpc/client"

import DesktopTable from "./Desktop"
import MobileTable from "./Mobile"

import type {
  ClientEarnAndBurnProps,
  TransactionsNonNullResponseObject,
} from "@/types/components/myPages/myPage/earnAndBurn"

export default function ClientEarnAndBurn({
  initialData,
  lang,
}: ClientEarnAndBurnProps) {
  /**
   * desctruct fetchNextPage, hasNextPage once pagination is
   * possible through API
   */
  const { data } = trpc.user.transaction.friendTransactions.useInfiniteQuery(
    { limit: 5 },
    {
      getNextPageParam: (lastPage) => lastPage?.nextCursor,
      initialData: {
        pageParams: [undefined, 1],
        pages: [initialData],
      },
    }
  )

  // TS having a hard time with the filtered type.
  // This is only temporary as we will not return null
  // later on when we handle errors appropriately.
  const filteredTransactions = (data?.pages.filter(
    (page) => page && page.data
  ) ?? []) as unknown as TransactionsNonNullResponseObject[]
  const transactions = filteredTransactions.flatMap((page) => page.data)
  return (
    <>
      <MobileTable lang={lang} transactions={transactions} />
      <DesktopTable lang={lang} transactions={transactions} />
    </>
  )
}