Word Counter

import { useState } from "react";
import { Textarea } from "@/components/ui/textarea";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";

export default function WordCounter() {
    const [text, setText] = useState("");

    const words = text.trim() ? text.trim().split(/\s+/).length : 0;
    const characters = text.length;
    const sentences = text.trim()
        ? text.split(/[.!?]+/).filter((s) => s.trim()).length
        : 0;
    const paragraphs = text.trim()
        ? text.split(/\n\s*\n/).filter((p) => p.trim()).length
        : 0;
    const readingTime = Math.max(1, Math.ceil(words / 200));

    const stats = [
        { label: "Words", value: words },
        { label: "Characters", value: characters },
        { label: "Sentences", value: sentences },
        { label: "Paragraphs", value: paragraphs },
        { label: "Reading Time", value: `${readingTime} min` },
    ];

    return (
        <div className="space-y-4">
            <Textarea
                placeholder="Start typing or paste your text here..."
                value={text}
                onChange={(e) => setText(e.target.value)}
                className="min-h-[200px] resize-y text-base"
            />
            <div className="flex flex-wrap gap-3">
                {stats.map((stat) => (
                    <div
                        key={stat.label}
                        className="flex items-center gap-2 rounded-lg border px-3 py-2"
                    >
                        <span className="text-sm text-muted-foreground">{stat.label}</span>
                        <Badge variant="secondary" className="font-mono text-sm">
                            {stat.value}
                        </Badge>
                    </div>
                ))}
            </div>
        </div>
    );
}