import { Suspense } from "react";
import DevicesTableSkeleton from "@/components/device-table-skeleton";
import DynamicFilter from "@/components/generic-filter";
import { WalletTransactionsTable } from "@/components/wallet-transactions-table";

export default async function Wallet({
	searchParams,
}: {
	searchParams: Promise<{
		query: string;
		page: number;
		sortBy: string;
		status: string;
	}>;
}) {
	const query = (await searchParams)?.query || "";

	return (
		<div>
			<div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4">
				<h3 className="text-sarLinkOrange text-2xl">Transaction History</h3>
			</div>
			<div
				id="wallet-filters"
				className=" pb-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
			>
				<DynamicFilter
					inputs={[
						{
							label: "Type",
							name: "transaction_type",
							type: "radio-group",
							options: [
								{
									label: "All",
									value: "",
								},
								{
									label: "Debit",
									value: "debit",
								},
								{
									label: "Credit",
									value: "credit",
								},
							],
						},
						{
							label: "Topup Amount",
							name: "amount",
							type: "dual-range-slider",
							min: 0,
							max: 1000,
							step: 10,
						},
					]}
				/>
			</div>
			<Suspense
				key={query}
				fallback={
					<DevicesTableSkeleton
						headers={[
							"Description",
							"Amount",
							"Transaction Type",
							"View Details",
							"Created at",
						]}
						length={10}
					/>
				}
			>
				<WalletTransactionsTable searchParams={searchParams} />
			</Suspense>
		</div>
	);
}