"use client"

import { useState } from "react"

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

import { TableProps } from "@/types/components/myPages/myPage/earnAndBurn"

export function TransactionTable({ transactions }: TableProps) {
  const [transactionDisplayCount, setTransactionDisplayCount] = useState(5)

  const showMoreTransactions = () => {
    setTransactionDisplayCount((count) => count + 5)
  }

  const displayedTransactions = transactions.slice(0, transactionDisplayCount)
  const hasMoreTransactions = transactions.length > transactionDisplayCount

  return (
    <>
      <MobileTable
        transactions={displayedTransactions}
        showMore={showMoreTransactions}
        hasMore={hasMoreTransactions}
      />
      <DesktopTable
        transactions={displayedTransactions}
        showMore={showMoreTransactions}
        hasMore={hasMoreTransactions}
      />
    </>
  )
}