import type { ReactNode } from "react";

interface Props {
  icon?: ReactNode;
  title?: string;
  message?: string;
  action?: ReactNode;
  className?: string;
}

export default function EmptyState({
  icon,
  title,
  message,
  action,
  className = "",
}: Props) {
  return (
    <div
      className={`flex flex-col items-center justify-center text-center px-6 py-12 text-brand-text/70 ${className}`}
    >
      {icon && <div className="mb-3 text-brand-accent text-3xl">{icon}</div>}
      {title && <h3 className="text-lg font-semibold text-brand-text mb-1">{title}</h3>}
      {message && <p className="max-w-sm text-sm">{message}</p>}
      {action && <div className="mt-4">{action}</div>}
    </div>
  );
}
