import { Leaf } from "lucide-react";
import { Icon } from "./ui/Icon";

export function EmptyState({
  message,
  hint,
}: {
  message: string;
  hint?: string;
}) {
  return (
    <div className="flex-1 flex flex-col items-center justify-center text-ink-subtle gap-2 p-4 text-center">
      <Icon icon={Leaf} className="size-8 text-line" />
      <div className="text-sm">{message}</div>
      {hint && (
        <div className="text-xs text-ink-subtle">{hint}</div>
      )}
    </div>
  );
}