proof reading tool

 import { useState } from "react";

import { Textarea } from "@/components/ui/textarea";

import { Button } from "@/components/ui/button";

import { Card, CardContent } from "@/components/ui/card";

import { Loader2 } from "lucide-react";

import { motion } from "framer-motion";

export default function AIProofreadingTool() {

  const [text, setText] = useState("");

  const [loading, setLoading] = useState(false);

  const [correctedText, setCorrectedText] = useState("");

  const handleProofread = async () => {

    setLoading(true);

    // Simulated API Call - Replace with actual AI integration

    setTimeout(() => {

      setCorrectedText(

        text.replace(/\bteh\b/g, "the").replace(/\brecieve\b/g, "receive")

      );

      setLoading(false);

    }, 500); // Faster start

  };

  return (

    <div className="max-w-2xl mx-auto p-6 space-y-4">

      <h1 className="text-2xl font-bold text-center">AI Proofreading & Rewriting Tool</h1>

      <Card>

        <CardContent className="p-4">

          <Textarea

            className="w-full h-40 p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"

            placeholder="Enter text here..."

            value={text}

            onChange={(e) => setText(e.target.value)}

          />

        </CardContent>

      </Card>

      <div className="flex justify-center space-x-4">

        <Button onClick={handleProofread} disabled={loading}>

          {loading ? <Loader2 className="animate-spin" /> : "Proofread"}

        </Button>

        <Button variant="secondary" onClick={() => setText("")}>Clear</Button>

      </div>

      {correctedText && (

        <motion.div

          initial={{ opacity: 0, y: 10 }}

          animate={{ opacity: 1, y: 0 }}

          transition={{ duration: 0.3 }}

        >

          <Card className="mt-4">

            <CardContent className="p-4">

              <h2 className="text-xl font-semibold">Corrected Text</h2>

              <p className="mt-2 p-2 bg-gray-100 rounded-lg">{correctedText}</p>

            </CardContent>

          </Card>

        </motion.div>

      )}

    </div>

  );

}