import { clsx } from "clsx";

export function HealthDots({ health, className }: { health: number; className?: string }) {
  return (
    <span className={clsx("inline-flex items-center gap-1", className)}>
      {Array.from({ length: 5 }, (_, i) => (
        <span
          key={i}
          className={clsx(
            "w-2 h-2 rounded-full",
            i < health ? "bg-success" : "bg-text-muted"
          )}
        />
      ))}
    </span>
  );
}