"use client"

import { keepPreviousData } from "@tanstack/react-query"
import { useState } from "react"

import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
import { trpc } from "@scandic-hotels/trpc/client"

import Pagination from "@/components/MyPages/Pagination"
import useLang from "@/hooks/useLang"

import ClientTable from "./ClientTable"

export default function TransactionTable() {
  const limit = 5
  const [page, setPage] = useState(1)
  const lang = useLang()
  const { data, isFetching, isLoading } =
    trpc.user.transaction.friendTransactions.useQuery(
      {
        limit,
        page,
        lang,
      },
      {
        placeholderData: keepPreviousData,
      }
    )

  return isLoading ? (
    <LoadingSpinner />
  ) : (
    <>
      <ClientTable transactions={data?.data.transactions || []} />
      {data && data.meta.totalPages > 1 ? (
        <Pagination
          handlePageChange={setPage}
          pageCount={data.meta.totalPages}
          isFetching={isFetching}
          currentPage={page}
        />
      ) : null}
    </>
  )
}