import { Suspense } from "react";
import { DevicesTable } from "@/components/devices-table";
import Search from "@/components/search";

export default async function ParentalControl({
  searchParams,
}: {
  searchParams: Promise<{
    page: number;
    sortBy: string;
    status: string;
  }>;
}) {

  const parentalControlFilters = {
    is_active: "true",
    has_a_pending_payment: "false",
  };

  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">Parental Control</h3>
      </div>

      <div
        id="user-filters"
        className=" pb-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
      >
        <Search />
      </div>
      <Suspense key={(await searchParams).page} fallback={"loading...."}>
        <DevicesTable
          parentalControl={true}
          searchParams={searchParams}
          additionalFilters={parentalControlFilters}
        />
      </Suspense>
    </div>
  );
}