ldc-ovoteam/resources/ts/back/Components/WordCounter.tsx

// * Other
import type { MinMax } from "@/hooks/use-laravel-validation";
import trans from "@/hooks/use-translations";

export default function WordCounter({
  value,
  limits,
}: Readonly<{
  value: string;
  limits?: MinMax;
}>) {
  const characters = value.length;
  const words = characters ? value.split(" ").length : 0;

  const renderLimit = () => {
    if (!limits) return null;
    const { min, max } = limits;
    if (min !== undefined && max !== undefined) {
      return ` / ${max} (min. ${min})`;
    }
    if (max !== undefined) {
      return ` / ${max}`;
    }
    if (min !== undefined) {
      return ` (min. ${min})`;
    }
    return null;
  };

  return (
    <section className="flex justify-around w-full gap-1.5 bg-secondary rounded-md py-1">
      <p className="text-sm text-muted-foreground mx-auto w-fit">
        {trans("uwil-backend::back.characters")}
        <span>{characters}</span>
        {renderLimit()}
      </p>
      <p className="text-sm text-muted-foreground mx-auto w-fit">
        {trans("uwil-backend::back.words")}
        <span>{words}</span>
      </p>
    </section>
  );
}