import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faExclamationTriangle } from "@fortawesome/free-solid-svg-icons";
import AdminButton from "./AdminButton";

interface AdminErrorStateProps {
  title?: string;
  message: string;
  onRetry?: () => void;
}

export default function AdminErrorState({
  title = "Something went wrong",
  message,
  onRetry,
}: AdminErrorStateProps) {
  return (
    <div className="flex flex-col items-center justify-center px-4 py-12 text-center">
      <div className="mb-4 flex h-14 w-14 items-center justify-center rounded-full border border-rose-500/30 bg-rose-500/10 text-rose-400">
        <FontAwesomeIcon icon={faExclamationTriangle} className="h-5 w-5" />
      </div>
      <h3 className="mb-1 text-base font-semibold text-slate-100">{title}</h3>
      <p className="mb-6 max-w-md text-sm text-slate-400">{message}</p>
      {onRetry && (
        <AdminButton variant="primary" onClick={onRetry}>
          Try Again
        </AdminButton>
      )}
    </div>
  );
}
