import { Suspense } from "react";
import { PlusIcon } from "lucide-react";

import { Button } from "@/components/ui/button";
import { CariMaster } from "@/components/cari-master";
import { DaftarSatuanBarang } from "./_components/daftar-satuan-barang";
import { SatuanBarangForm } from "./_components/satuan-barang-form";

export default function SatuanBarangPage({
  searchParams,
}: {
  searchParams: Promise<{ search?: string; page?: string }>;
}) {
  return (
    <div className="p-4">
      <div className="flex items-center justify-between">
        <h1 className="text-lg font-semibold">Data Satuan Barang</h1>
        <div className="flex items-center gap-2">
          <Suspense fallback={null}>
            <CariMaster
              basePath="/master/satuan-barang"
              placeholder="Cari satuan..."
            />
          </Suspense>
          <SatuanBarangForm
            trigger={
              <Button>
                Tambah
                <PlusIcon />
              </Button>
            }
          />
        </div>
      </div>
      <Suspense fallback={<p className="mt-4 text-sm">Memuat...</p>}>
        <DaftarSatuanBarang searchParams={searchParams} />
      </Suspense>
    </div>
  );
}