import { Suspense } from "react";
import DynamicFilter from "@/components/generic-filter";
import { UsersTable } from "@/components/user-table";


export default async function AdminUsers({
	searchParams,
}: {
	searchParams: Promise<{
		query: string;
		page: number;
		sortBy: string;
		status: string;
	}>;
}) {
	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">Users</h3>
			</div>

			<div
				id="user-table-filters"
				className=" pb-4 gap-4 flex items-center justify-start"
			>
				<DynamicFilter
					description="Filter users by id card, name, or house name and more."
					title="User Filter"
					inputs={[
						{
							name: "first_name",
							label: "User First Name",
							type: "string",
							placeholder: "Enter user first name",
						},
						{
							name: "last_name",
							label: "User Last Name",
							type: "string",
							placeholder: "Enter user last name",
						},
						{
							name: "id_card",
							label: "ID Card",
							type: "string",
							placeholder: "Enter ID card number",
						},
						{
							name: "house_name",
							label: "House Name",
							type: "string",
							placeholder: "Enter house name",
						},
						{
							name: "mobile",
							label: "Phone Number",
							type: "string",
							placeholder: "Enter phone number",
						},
						{
							name: "verified",
							type: "radio-group",
							label: "User Status",
							options: [
								{
									value: "",
									label: "All",
								},
								{
									label: "Verified",
									value: "true",
								},
								{
									label: "Unverified",
									value: "false",
								}]
						}
					]}
				/>
			</div>
			<Suspense fallback={"loading...."}>
				<UsersTable searchParams={searchParams} />
			</Suspense>
		</div>
	);
}