import { Inbox } from "lucide-react";
import { Card, CardContent } from "@/components/ui/card";
import { cn } from "@/lib/utils";

interface EmptyCardProps {
  message?: string;
  description?: string;
  icon?: React.ReactNode;
  className?: string;
  /** Render as a compact inline row instead of a full card */
  inline?: boolean;
}

export function EmptyCard({
  message = "No data available",
  description,
  icon,
  className,
  inline = false,
}: EmptyCardProps) {
  if (inline) {
    return (
      <div className={cn("flex items-center gap-2 text-sm text-muted-foreground", className)}>
        {icon ?? <Inbox className="w-4 h-4 shrink-0" />}
        <span>{message}</span>
      </div>
    );
  }

  return (
    <Card className={cn("border-dashed", className)}>
      <CardContent className="flex flex-col items-center justify-center gap-3 py-10 text-center">
        <div className="text-muted-foreground/40">
          {icon ?? <Inbox className="w-8 h-8" />}
        </div>
        <div>
          <p className="text-sm font-medium text-muted-foreground">{message}</p>
          {description && (
            <p className="text-xs text-muted-foreground/60 mt-1">{description}</p>
          )}
        </div>
      </CardContent>
    </Card>
  );
}