import PageContainer from "@/components/layout/page-container"
import { buttonVariants } from "@/components/ui/button"
import { Heading } from "@/components/ui/heading"
import { Separator } from "@/components/ui/separator"
import { DataTableSkeleton } from "@/components/ui/table/data-table-skeleton"
import UsersDataTable from "@/features/users/components/user-data-table"
import { searchParamsCache } from "@/lib/searchparams"
import { cn } from "@/lib/utils"
import { IconPlus } from "@tabler/icons-react"
import Link from "next/link"
import { SearchParams } from "nuqs/server"
import { Suspense } from "react"

export const metadata = {
  title: "Dashboard: Users",
}

type pageProps = {
  searchParams: Promise<SearchParams>
}

export default async function Page(props: pageProps) {
  const searchParams = await props.searchParams
  searchParamsCache.parse(searchParams)

  return (
    <PageContainer scrollable={false}>
      <div className="flex flex-1 flex-col space-y-4">
        <div className="flex items-start justify-between">
          <Heading title="Users" description="Manage users" />
          <Link href="/dashboard/users/new" className={cn(buttonVariants(), "text-xs md:text-sm")}>
            <IconPlus className="mr-2 h-4 w-4" /> Add New
          </Link>
        </div>
        <Separator />
        <div className="flex-1 w-full overflow-auto">
          <Suspense fallback={<DataTableSkeleton columnCount={8} rowCount={8} filterCount={2} />}>
            <UsersDataTable />
          </Suspense>
        </div>
      </div>
    </PageContainer>
  )
}