import { AlertCircle, RefreshCw } from "lucide-react";

interface ErrorMessageProps {
  title?: string;
  message?: string;
  onRetry?: () => void;
  fullHeight?: boolean;
}

export default function ErrorMessage({
  title = "Something went wrong",
  message = "An error occurred while loading this content.",
  onRetry,
  fullHeight = true,
}: ErrorMessageProps) {
  return (
    <div
      className={`flex flex-col items-center justify-center gap-4 ${
        fullHeight ? "h-64" : "py-8"
      }`}
    >
      <div className="rounded-full bg-red-900/30 p-4">
        <AlertCircle className="h-10 w-10 text-red-400" />
      </div>
      <div className="text-center">
        <h3 className="text-lg font-semibold text-white">{title}</h3>
        <p className="mt-1 text-sm text-gray-400">{message}</p>
      </div>
      {onRetry && (
        <button
          onClick={onRetry}
          className="flex items-center gap-2 rounded-lg border border-gray-700 bg-gray-800 px-4 py-2 text-sm text-gray-300 hover:border-cyan-500/50 hover:text-cyan-400 transition-colors"
        >
          <RefreshCw className="h-4 w-4" />
          Try Again
        </button>
      )}
    </div>
  );
}