AI Translation Panel

"use client";

import React, { useState } from "react";
import { Languages, ArrowRight, Check, History } from "lucide-react";

export default function AITranslationPanel() {
    const [source, setSource] = useState("The future of software development is deeply integrated with large language models.");

    return (
        <div className="rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 shadow-sm w-full max-w-4xl 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-4">
                    <div className="flex items-center gap-2 px-3 py-1.5 rounded-lg border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-900 text-xs font-bold text-zinc-600 dark:text-zinc-300">
                        English
                    </div>
                    <ArrowRight className="h-3 w-3 text-zinc-400" />
                    <div className="flex items-center gap-2 px-3 py-1.5 rounded-lg border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-900 text-xs font-bold text-zinc-900 dark:text-zinc-100 ring-2 ring-blue-500/20">
                        Spanish
                        <Languages className="h-3 w-3 text-blue-500" />
                    </div>
                </div>
                <button className="text-zinc-400 hover:text-zinc-600 transition-colors">
                    <History className="h-4 w-4" />
                </button>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 divide-y md:divide-y-0 md:divide-x divide-zinc-200 dark:divide-zinc-800">
                <div className="p-6">
                    <label className="text-[10px] font-black text-zinc-400 uppercase tracking-widest mb-4 block">Source Text</label>
                    <textarea
                        value={source}
                        onChange={(e) => setSource(e.target.value)}
                        className="w-full h-32 bg-transparent text-sm text-zinc-500 dark:text-zinc-400 focus:outline-none resize-none leading-relaxed"
                    />
                </div>
                <div className="p-6 bg-blue-50/20 dark:bg-blue-900/5">
                    <label className="text-[10px] font-black text-blue-500 uppercase tracking-widest mb-4 block">AI Translation</label>
                    <p className="text-sm font-medium text-zinc-900 dark:text-zinc-100 leading-relaxed min-h-[128px]">
                        El futuro del desarrollo de software está profundamente integrado con grandes modelos de lenguaje.
                    </p>
                    <div className="mt-4 flex items-center justify-between">
                        <span className="text-[10px] font-bold text-emerald-500 flex items-center gap-1.5">
                            <Check className="h-3 w-3" />
                            Verified Translation
                        </span>
                        <span className="text-[10px] text-zinc-400 font-mono">1.2ms latency</span>
                    </div>
                </div>
            </div>
        </div>
    );
}