"use client";
import { useState, type FC } from "react";

import FilterForm from "@/components/common/filter-form";
import { userFilter } from "@/components/forms/schema/user-filter";
import AddUser from "@/components/users/user-add";
import UsersList from "@/components/users/user-list";

const UsersListPage: FC = () => {
  const [filterValue, setFilter] = useState("#");
  return (
    <>
      <div className="block items-center justify-between border-b border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-800 sm:flex">
        <div className="mb-1 w-full">
          <div className="flex">
            <h1 className="text-xl font-semibold text-gray-900 dark:text-white sm:text-2xl">
              Users
            </h1>
            <div className="ml-auto flex items-center space-x-2 sm:space-x-3">
              <AddUser />
            </div>
          </div>
        </div>
      </div>
      <div className="block border-t dark:border-t dark:border-gray-600">
        <FilterForm schema={userFilter} setFilter={setFilter} grids={4} />
      </div>
      <div className="flex flex-col">
        <div className="overflow-x-auto">
          <div className="inline-block min-w-full align-middle">
            <div className="overflow-hidden shadow">
              <UsersList filterValue={filterValue} />
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default UsersListPage;