Loading, Error ও Empty State

"use client";

import { useProducts } from "@/lib/hooks/use-products";
import { ProductTable } from "./product-table";
import { Skeleton } from "@/components/ui/skeleton";

export function ProductList({ params }: { params: ProductQueryParams }) {
  const { data, isPending, isError, error, refetch } = useProducts(params);

  // 1) Loading
  if (isPending) {
    return <ProductTableSkeleton />;
  }

  // 2) Error
  if (isError) {
    return (
      <div className="rounded-xl border p-6 text-center">
        <p className="font-medium">ডেটা লোড করা যায়নি</p>
        <p className="mt-1 text-sm text-muted-foreground">{error.message}</p>
        <Button onClick={() => refetch()} className="mt-3">
          আবার চেষ্টা করুন
        </Button>
      </div>
    );
  }

  // 3) Empty
  if (data.items.length === 0) {
    return <EmptyState message="কোনো product পাওয়া যায়নি" />;
  }

  // 4) Success
  return <ProductTable data={data.items} />;
}

export function EmptyState({
  message,
  action,
}: {
  message: string;
  action?: React.ReactNode;
}) {
  return (
    <div className="rounded-xl border py-16 text-center">
      <p className="text-muted-foreground">{message}</p>
      {action && <div className="mt-4">{action}</div>}
    </div>
  );
}