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

import { Typography } from "@mui/material";
import { Button } from "@/components/ui/button";
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,
      )}
      role="alert"
    >
      <Typography variant="body2" color="error">
        {message}
      </Typography>
      {onRetry && (
        <Button
          variant="outline"
          size="default"
          onClick={onRetry}
          sx={{ minHeight: 32, height: 32 }}
        >
          Retry
        </Button>
      )}
    </div>
  );
}