AI Code Generator

"use client";

import React, { useState } from "react";
import { Terminal, Code, Cpu, Package, Play, Check } from "lucide-react";

export default function AICodeGenerator() {
    const [copied, setCopied] = useState(false);

    const code = `import { LLM } from "ai-sdk";\n\nconst agent = new LLM.Agent({\n  role: "software engineer",\n  tools: ["code_editor", "terminal"],\n  maxTokens: 1024\n});\n\nawait agent.execute("Fix security vulnerability in auth.ts");`;

    return (
        <div className="rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 shadow-xl w-full max-w-2xl mx-auto overflow-hidden">
            <div className="flex items-center justify-between px-6 py-4 border-b border-zinc-100 dark:border-zinc-800 bg-zinc-50/50 dark:bg-zinc-900/50">
                <div className="flex items-center gap-6">
                    <div className="flex items-center gap-2">
                        <Code className="h-4 w-4 text-blue-500" />
                        <span className="text-xs font-bold text-zinc-900 dark:text-zinc-100">TypeScript</span>
                    </div>
                    <div className="flex items-center gap-2">
                        <Package className="h-4 w-4 text-zinc-400" />
                        <span className="text-[10px] font-bold text-zinc-500">Node NEXT</span>
                    </div>
                </div>
                <button className="flex items-center gap-2 py-1.5 px-4 rounded-xl bg-zinc-900 dark:bg-white text-white dark:text-zinc-950 text-[10px] font-bold hover:opacity-90 transition-all shadow-lg active:scale-95">
                    <Play className="h-3 w-3 fill-current" />
                    RUN CODE
                </button>
            </div>

            <div className="relative group bg-zinc-950 p-6 md:p-8">
                <button
                    onClick={() => { navigator.clipboard.writeText(code); setCopied(true); setTimeout(() => setCopied(false), 2000); }}
                    className="absolute top-4 right-4 p-2 rounded-lg bg-white/5 border border-white/10 text-white/40 hover:text-white hover:bg-white/10 opacity-0 group-hover:opacity-100 transition-all z-10"
                >
                    {copied ? <Check className="h-3.5 w-3.5" /> : <Code className="h-3.5 w-3.5" />}
                </button>
                <pre className="font-mono text-xs md:text-sm leading-relaxed text-blue-400/90 selection:bg-blue-500/30">
                    <code>{code}</code>
                </pre>
                <div className="absolute bottom-4 right-6 flex items-center gap-2 text-[9px] font-black text-white/20 uppercase tracking-[0.2em] pointer-events-none">
                    <Cpu className="h-3 w-3" />
                    Optimized for Vercel
                </div>
            </div>

            <div className="px-6 py-4 flex items-center justify-between bg-zinc-50/80 dark:bg-zinc-900/80 text-[10px] text-zinc-500 font-medium">
                <span className="flex items-center gap-2">
                    <Terminal className="h-3 w-3" />
                    $ npx ts-node agent.ts
                </span>
                <span className="font-bold tabular-nums">GEN TIME: 842ms</span>
            </div>
        </div>
    );
}