AI Text Generator

"use client";

import React, { useState } from "react";
import { Wand2, Type, Clock, Copy, RefreshCw } from "lucide-react";

export default function AITextGenerator() {
    const [prompt, setPrompt] = useState("");
    const [isGenerating, setIsGenerating] = useState(false);

    const generate = () => {
        setIsGenerating(true);
        setTimeout(() => setIsGenerating(false), 2000);
    };

    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">
            <div className="flex items-center justify-between mb-8">
                <div className="flex items-center gap-2">
                    <Wand2 className="h-4 w-4 text-violet-500" />
                    <h3 className="text-sm font-bold text-zinc-900 dark:text-zinc-100">Content AI</h3>
                </div>
                <div className="flex items-center gap-2">
                    <span className="text-[10px] font-bold text-zinc-400 px-2 py-0.5 rounded-full border border-zinc-100 dark:border-zinc-800 uppercase tracking-widest">v4.0 Final</span>
                </div>
            </div>

            <div className="space-y-6">
                <div className="relative">
                    <textarea
                        value={prompt}
                        onChange={(e) => setPrompt(e.target.value)}
                        placeholder="Describe the content you want to generate..."
                        className="w-full rounded-xl border border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-900 p-4 text-sm focus:outline-none focus:ring-2 focus:ring-violet-500/20 resize-none h-32"
                    />
                    <button
                        onClick={generate}
                        disabled={isGenerating || !prompt}
                        className="absolute bottom-3 right-3 flex items-center gap-2 px-4 py-2 rounded-lg bg-violet-600 text-white text-xs font-bold hover:bg-violet-700 transition-all disabled:opacity-50"
                    >
                        {isGenerating ? <RefreshCw className="h-3.5 w-3.5 animate-spin" /> : <Wand2 className="h-3.5 w-3.5" />}
                        {isGenerating ? "Thinking..." : "Generate"}
                    </button>
                </div>

                <div className="grid grid-cols-3 gap-3">
                    {[
                        { label: "Tone", val: "Professional", icon: <Type className="h-3 w-3" /> },
                        { label: "Length", val: "~500 words", icon: <Clock className="h-3 w-3" /> },
                        { label: "Language", val: "English (US)", icon: <Globe className="h-3 w-3" /> },
                    ].map((s, i) => (
                        <button key={i} className="p-3 rounded-xl border border-zinc-100 dark:border-zinc-800 bg-zinc-50/50 dark:bg-zinc-900/50 hover:border-zinc-200 transition-colors text-left">
                            <div className="text-zinc-400 mb-1.5">{s.icon}</div>
                            <p className="text-[9px] font-black uppercase tracking-widest text-zinc-400">{s.label}</p>
                            <p className="text-xs font-bold text-zinc-900 dark:text-zinc-100 mt-0.5">{s.val}</p>
                        </button>
                    ))}
                </div>
            </div>
        </div>
    );
}

function Globe({ className }: { className?: string }) {
    return (
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}>
            <circle cx="12" cy="12" r="10" /><path d="M12 2a14.5 14.5 0 0 0 0 20" /><path d="M2 12h20" />
        </svg>
    );
}