// * Other
import useTrans from "@/hooks/use-translations";

export default function WordCounter({ value }: { value: string }) {
    const characters = value.length;
    const words = characters ? value.split(" ").length : 0;
    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">
                {useTrans("back.characters")}
                <span>{characters}</span>
            </p>
            <p className="text-sm text-muted-foreground mx-auto w-fit">
                {useTrans("back.words")}
                <span>{words}</span>
            </p>
        </section>
    );
}