shoc-frontend-new/src/components/ui/query-error-panel.tsx

import { Button } from "@/components/ui/button";
import { Text } from "@/components/ui/text";
import { cn } from "@/lib/utils";

type QueryErrorPanelProps = {
  message?: string;
  onRetry?: () => void;
  className?: string;
  compact?: boolean;
};

export function QueryErrorPanel({
  message = "Something went wrong. Please try again.",
  onRetry,
  className,
  compact = false,
}: QueryErrorPanelProps) {
  return (
    <div
      className={cn(
        "flex flex-col items-start gap-2 rounded-lg border border-border bg-background",
        compact ? "p-3" : "p-4",
        className,
      )}
    >
      <Text variant="error">{message}</Text>
      {Boolean(onRetry) && (
        <Button
          variant="outline"
          size="default"
          onClick={onRetry}
          sx={{ minHeight: 32, height: 32 }}
        >
          Retry
        </Button>
      )}
    </div>
  );
}