// Petit ornement (◆, comme diamond-divider.tsx) au-dessus des messages
// "rien à afficher" — sans ça ce sont des états qui ressemblent à une
// erreur/un oubli plutôt qu'un vrai état normal de l'app.
export function EmptyState({ message, className = "text-marble/60" }: { message: string; className?: string }) {
  return (
    <div className="flex flex-col items-center gap-2 py-2 text-center">
      <span className="text-gold/50" aria-hidden>
        ◆
      </span>
      <p className={`text-sm ${className}`}>{message}</p>
    </div>
  );
}