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

export function ErrorState({
  title,
  description,
  onRetry
}: {
  title: string;
  description?: string;
  onRetry?: () => void;
}) {
  return (
    <div className="flex flex-col items-center justify-center rounded-2xl border border-red-100 bg-red-50 px-6 py-10 text-center">
      <AlertTriangle className="h-5 w-5 text-red-500" aria-hidden="true" />
      <p className="mt-2 text-sm font-medium text-red-800">{title}</p>
      {description && <p className="mt-1 text-xs text-red-600">{description}</p>}
      {onRetry && (
        <Button size="sm" variant="secondary" className="mt-4" onClick={onRetry}>
          Retry
        </Button>
      )}
    </div>
  );
}