import { DevicesTable } from "@/components/devices-table";
import Filter from "@/components/filter";
import Search from "@/components/search";
import AddDeviceDialogForm from "@/components/user/add-device-dialog";
import { getCurrentUser } from "@/lib/auth-utils";
import { AArrowDown, AArrowUp } from "lucide-react";
import React, { Suspense } from "react";

const sortfilterOptions = [
	{
		value: 'asc',
		label: 'Ascending',
		icon: <AArrowUp size={16} />,
	},
	{
		value: 'desc',
		label: 'Descending',
		icon: <AArrowDown size={16} />,
	},
]


export default async function Devices({
	searchParams,
}: {
	searchParams: Promise<{
		query: string;
		page: number;
		sortBy: string;
		status: string;
	}>;
}) {
	const query = (await searchParams)?.query || "";
	const user = await getCurrentUser()
	return (
		<div>
			<div className="flex justify-between items-center border-b-2 text-gray-500 text-2xl font-bold title-bg py-4 px-2 mb-4">
				<h3>
					My Devices
				</h3>
				<AddDeviceDialogForm user_id={user?.id} />
			</div>

			<div
				id="user-filters"
				className=" border-b-2 pb-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
			>
				<Search />
				<Filter
					options={sortfilterOptions}
					defaultOption="asc"
					queryParamKey="sortBy"
				/>
			</div>
			<Suspense key={query} fallback={"loading...."}>
				<DevicesTable searchParams={searchParams} />
			</Suspense>
		</div>
	);
}