import { type ReactNode } from "react";

type Props = {
  icon?: ReactNode;
  title: string;
  description?: string;
  action?: ReactNode;
};

export function EmptyState({ icon, title, description, action }: Props) {
  return (
    <div className="flex flex-col items-center justify-center gap-3 rounded-2xl border border-dashed border-zinc-800/80 bg-zinc-900/30 px-6 py-12 text-center">
      {icon ? <div className="text-zinc-500">{icon}</div> : null}
      <h2 className="text-base font-semibold text-zinc-200">{title}</h2>
      {description ? <p className="max-w-md text-sm text-zinc-400">{description}</p> : null}
      {action ? <div className="mt-1">{action}</div> : null}
    </div>
  );
}