"use client";
import PageHeader from "@/components/PageHeder";
import AutoSyncList from "@/components/auto-sync/auto-sync-list";
import MikrotikSyncForm from "@/components/auto-sync/mikrotik-auto-sync";
import { clientSyncFilter } from "@/components/forms/schema/client-sync-filter";
import { usePermission } from "@/utils/auth/permission";
import dynamic from "next/dynamic";
import { FC, useState } from "react";
const FilterForm = dynamic(() => import("@/components/common/filter-form"));

const AutoSyncContent: FC = () => {
  const [filterValue, setFilter] = useState<string | null>(null);
  return (
    <>
      <div>
        <PageHeader>
          <div className="flex justify-between !p-0">
            <h2 className="text-xl font-semibold">Mikrotik Client Import</h2>
          </div>
        </PageHeader>
      </div>
      {usePermission("sync-clients.sync") && <MikrotikSyncForm />}
      <div className="block border-t dark:border-t dark:border-gray-600">
        <FilterForm schema={clientSyncFilter} setFilter={setFilter} />
      </div>
      <AutoSyncList filterValue={filterValue} />
    </>
  );
};

export default AutoSyncContent;