"use client";

import { SearchX, AlertTriangle } from "lucide-react";
import { Button } from "@/components/ui/button";

interface ErrorStateProps {
  error: string;
  onRetry: () => void;
}

export function ErrorState({ error, onRetry }: ErrorStateProps) {
  // Check if this is a "no results" error vs an actual failure
  const isNoResults = error.toLowerCase().includes("no assertions found") ||
    error.toLowerCase().includes("no results found");

  return (
    <div className="flex flex-col items-center justify-center p-8 text-center">
      <div className={`w-12 h-12 rounded-full flex items-center justify-center mb-4 ${
        isNoResults ? "bg-muted" : "bg-destructive/10"
      }`}>
        {isNoResults ? (
          <SearchX className="w-6 h-6 text-muted-foreground" />
        ) : (
          <AlertTriangle className="w-6 h-6 text-destructive" />
        )}
      </div>
      <h3 className="text-lg font-medium text-foreground mb-2">
        {isNoResults ? "No Results Found" : "Query Failed"}
      </h3>
      <p className="text-muted-foreground mb-4 max-w-md">
        {error}
      </p>
      <Button onClick={onRetry} variant="outline" size="sm">
        Try Again
      </Button>
    </div>
  );
}
