"use client";

import { cn } from "@/lib/utils";
import type { LucideIcon } from "lucide-react";

interface ErrorStateProps {
  icon?: LucideIcon;
  title: string;
  description?: string;
  className?: string;
  children?: React.ReactNode;
}

/**
 * Reusable error state (e.g. load failed, not found).
 */
export function ErrorState({
  icon: Icon,
  title,
  description,
  className,
  children,
}: ErrorStateProps) {
  return (
    <div
      className={cn(
        "min-h-[200px] flex items-center justify-center text-center p-6",
        className
      )}
    >
      <div>
        {Icon && (
          <Icon className="h-16 w-16 text-gray-300 mx-auto mb-4" aria-hidden />
        )}
        <h2 className="text-2xl font-bold text-gray-700 mb-2">{title}</h2>
        {description && <p className="text-gray-500 mb-6">{description}</p>}
        {children}
      </div>
    </div>
  );
}