edr-platform/apps/edr-freight-web/backoffice/src/components/bookings/BookingTableEmpty.tsx

import { Package, Search } from "lucide-react";
import { Button } from "@edr/ui-common";
import { bookingGlass, bookingSurface } from "./booking-ui.styles";
import { cn } from "@/lib/utils";

interface BookingTableEmptyProps {
  isError?: boolean;
  hasSearch?: boolean;
  onRetry?: () => void;
}

export function BookingTableEmpty({
  isError,
  hasSearch,
  onRetry,
}: BookingTableEmptyProps) {
  return (
    <div className={bookingSurface.emptyState}>
      <div
        className={cn(
          "flex size-14 items-center justify-center rounded-2xl text-muted-foreground",
          bookingGlass.iconWellGreen,
        )}
      >
        {hasSearch ? <Search className="size-6" /> : <Package className="size-6" />}
      </div>
      <div className="max-w-sm space-y-1">
        <h3 className="text-base font-semibold text-foreground">
          {isError
            ? "Could not load bookings"
            : hasSearch
              ? "No matches on this page"
              : "No bookings with this status"}
        </h3>
        <p className="text-sm text-muted-foreground">
          {isError
            ? "Check your connection and try again."
            : hasSearch
              ? "Try a different reference or customer name."
              : "New customer submissions will appear when status is Submitted."}
        </p>
      </div>
      {isError && onRetry && (
        <Button variant="outline" size="sm" onClick={onRetry}>
          Retry
        </Button>
      )}
    </div>
  );
}