AI Content Rewriter

"use client";

import React from "react";
import { ArrowLeftRight, Check, Zap } from "lucide-react";

export default function AIContentRewriter() {
    const original = "The user interface of the application is somewhat difficult for users to understand because there are too many buttons and the color scheme is not consistent across different pages.";
    const rewritten = "The application's UI is unintuitive due to over-crowded controls and a fragmented color palette.";

    return (
        <div className="rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 p-6 shadow-sm w-full max-w-2xl mx-auto overflow-hidden">
            <div className="flex items-center justify-between mb-8">
                <h3 className="text-sm font-bold text-zinc-900 dark:text-zinc-100 uppercase tracking-widest flex items-center gap-2">
                    <Zap className="h-4 w-4 text-blue-500 fill-current" />
                    Concise Rewriter
                </h3>
                <span className="text-[10px] font-black text-blue-500 px-2 py-0.5 rounded bg-blue-50 dark:bg-blue-900/20">64% REDUCTION</span>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 relative">
                <div className="hidden md:flex absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 h-8 w-8 rounded-full bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 items-center justify-center z-10 shadow-sm">
                    <ArrowLeftRight className="h-3 w-3 text-zinc-400" />
                </div>

                <div className="space-y-3">
                    <p className="text-[10px] uppercase font-black tracking-widest text-zinc-400">Original Text</p>
                    <div className="p-4 rounded-xl bg-zinc-50 dark:bg-zinc-900 border border-zinc-100 dark:border-zinc-800 min-h-[120px]">
                        <p className="text-xs text-zinc-500 leading-relaxed italic">{original}</p>
                    </div>
                </div>

                <div className="space-y-3">
                    <p className="text-[10px] uppercase font-black tracking-widest text-blue-500">AI Improved</p>
                    <div className="p-4 rounded-xl bg-blue-600 text-white shadow-xl shadow-blue-500/10 min-h-[120px]">
                        <p className="text-xs font-medium leading-relaxed">{rewritten}</p>
                        <div className="mt-4 flex items-center gap-1.5 opacity-80">
                            <Check className="h-3 w-3" />
                            <span className="text-[9px] font-bold uppercase tracking-wider">Ready to use</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}