import * as React from "react";
import { cn } from "@/lib/utils";

interface InputStrengthIndicatorProps {
  text: string;
  minWords: number;
  className?: string;
}

export function InputStrengthIndicator({
  text,
  minWords,
  className
}: InputStrengthIndicatorProps) {
  const wordCount = text.trim() ? text.trim().split(/\s+/).filter(Boolean).length : 0;
  const percentage = (wordCount / minWords) * 100;

  const getState = () => {
    if (percentage >= 100) return { level: 3, label: "Good length", color: "bg-green-500" };
    if (percentage >= 33) return { level: 2, label: "Getting there", color: "bg-yellow-500" };
    return { level: 1, label: "Add more detail", color: "bg-red-500" };
  };

  const state = getState();

  return (
    <div className={cn("flex items-center gap-2 mt-1.5 text-xs text-muted-foreground", className)}>
      <div className="flex gap-1">
        {[1, 2, 3].map((dot) => (
          <div
            key={dot}
            className={cn(
              "w-2 h-2 rounded-full",
              dot <= state.level ? state.color : "bg-muted"
            )}
          />
        ))}
      </div>
      <span>{wordCount} / {minWords} words</span>
      <span className="text-muted-foreground/70">·</span>
      <span>{state.label}</span>
    </div>
  );
}