"use client";

import { useRouter } from "next/navigation";
import { Button } from "@heroui/react";

type ProductDetailErrorStateProps = {
  /** Section-specific message, e.g. "Unable to load reviews" */
  message?: string;
  /** Optional retry; defaults to router.refresh() */
  onRetry?: () => void;
};

/**
 * Section-level error state for PDP. Use when a section's data fetch fails
 * (e.g. Convex error) so the rest of the page still works.
 */
export function ProductDetailErrorState({
  message = "Something went wrong loading this section.",
  onRetry,
}: ProductDetailErrorStateProps) {
  const router = useRouter();
  const handleRetry = onRetry ?? (() => router.refresh());

  return (
    <div
      className="rounded-lg border border-red-200 bg-red-50/50 p-6 text-center"
      role="alert"
      aria-live="polite"
    >
      <p className="text-red-800">{message}</p>
      <Button
        variant="primary"
        onPress={handleRetry}
        className="mt-4 w-full md:w-auto"
      >
        Try again
      </Button>
    </div>
  );
}
