import Filter from "@/components/filter";
import Search from "@/components/search";
import { UsersTable } from "@/components/user-table";
import { AdminAuthGuard } from "@/lib/auth-guard";
import { CheckCheck, Hourglass, Minus } from "lucide-react";
import React, { Suspense } from "react";
export default async function AdminUsers({
	searchParams,
}: {
	searchParams: Promise<{
		query: string;
		page: number;
		sortBy: string;
		status: string;
	}>;
}) {
	await AdminAuthGuard();

	return (
		<div>
			<h3 className="border-b-2 text-2xl font-bold title-bg py-4 px-2 mb-4">
				Users
			</h3>
			<div
				id="user-filters"
				className=" border-b-2 pb-4 gap-4 flex items-center justify-start"
			>
				<Search />
				<Filter
					options={[
						{
							value: "all",
							label: "ALL",
							icon: <Minus size={14} />,
						},
						{
							value: "unverified",
							label: "Unverfieid",
							icon: <CheckCheck size={14} />,
						},
						{
							value: "verified",
							label: "Verified",
							icon: <Hourglass size={14} />,
						},
					]}
					defaultOption="all"
					queryParamKey="status"
				/>
			</div>
			<Suspense fallback={"loading...."}>
				<UsersTable searchParams={searchParams} />
			</Suspense>
		</div>
	);
}