import { Inbox } from "lucide-react";

export function EmptyState({ title, description }: { title: string; description: string }) {
  return (
    <div className="flex min-h-56 flex-col items-center justify-center px-6 py-10 text-center">
      <span className="mb-4 grid size-11 place-items-center rounded-full bg-[var(--surface-muted)] text-[var(--ink-soft)]">
        <Inbox size={20} aria-hidden />
      </span>
      <h3 className="text-base font-bold">{title}</h3>
      <p className="mt-1 max-w-md text-sm leading-7 text-[var(--ink-soft)]">{description}</p>
    </div>
  );
}
