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

interface ErrorCardProps {
  message?: string;
  onRetry?: () => void;
  className?: string;
  /** Render as a compact inline row instead of a full card */
  inline?: boolean;
}

export function ErrorCard({
  message = "Failed to load data.",
  onRetry,
  className,
  inline = false,
}: ErrorCardProps) {
  if (inline) {
    return (
      <div className={cn("flex items-center gap-2 text-sm text-muted-foreground", className)}>
        <AlertTriangle className="w-4 h-4 text-amber-400 shrink-0" />
        <span>{message}</span>
        {onRetry && (
          <button
            onClick={onRetry}
            className="text-xs underline underline-offset-2 hover:text-foreground transition-colors"
          >
            Retry
          </button>
        )}
      </div>
    );
  }

  return (
    <Card className={cn("border-destructive/30 bg-destructive/5", className)}>
      <CardContent className="flex flex-col items-center justify-center gap-3 py-10 text-center">
        <AlertTriangle className="w-8 h-8 text-destructive/70" />
        <div>
          <p className="text-sm font-medium text-foreground">Something went wrong</p>
          <p className="text-xs text-muted-foreground mt-1">{message}</p>
        </div>
        {onRetry && (
          <Button variant="outline" size="sm" onClick={onRetry} className="gap-2 mt-1">
            <RefreshCw className="w-3.5 h-3.5" />
            Try again
          </Button>
        )}
      </CardContent>
    </Card>
  );
}