import { MessageSquareText } from "lucide-react";
import { EmptyState } from "../../../components/ui/empty-state";
import { Button } from "../../../components/ui/button";

interface Props {
  /** A read behind the list failed, so an empty list is unknown. */
  failed: boolean;
  /** A read behind the list has not answered yet. */
  loading: boolean;
  searchTerm: string;
  onRetry: () => void;
}

/** What an empty Providers list says: failed, still loading, no match, or truly none. */
export const ProvidersListStatus = ({ failed, loading, searchTerm, onRetry }: Props) => {
  if (failed) {
    return (
      <div className="my-auto pt-[100px] text-center" role="alert">
        <p className="text-sm">Your practices and providers could not be loaded just now.</p>
        <Button variant="outline" className="mt-3" onClick={onRetry}>
          Try again
        </Button>
      </div>
    );
  }

  if (loading) {
    return <p className="my-auto pt-[100px] text-center text-sm text-muted-foreground">Loading your providers…</p>;
  }

  return (
    // The shared empty state, matching the conversations panel on the same screen.
    <div className="my-auto pt-[100px]">
      <EmptyState
        icon={MessageSquareText}
        title={searchTerm ? "No matching organizations" : "No organizations available"}
        description={searchTerm
          ? "Try a different search term"
          : "There are no organizations with patient-facing providers available."}
        data-testid="patient-organizations-empty"
      />
    </div>
  );
};

export default ProvidersListStatus;