AI Email Composer

"use client";

import React, { useState } from "react";
import { Mail, Send, Sparkles, Smile, Paperclip } from "lucide-react";

export default function AIEmailComposer() {
    const [tone, setTone] = useState("Professional");

    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-2xl mx-auto overflow-hidden">
            <div className="px-6 py-4 flex items-center justify-between border-b border-zinc-100 dark:border-zinc-800 bg-zinc-50/50 dark:bg-zinc-900/50">
                <div className="flex items-center gap-2">
                    <Mail className="h-4 w-4 text-blue-500" />
                    <span className="text-sm font-bold text-zinc-900 dark:text-zinc-100">Smart Draft</span>
                </div>
                <div className="flex items-center gap-2">
                    {["Professional", "Casual", "Urgent"].map(t => (
                        <button
                            key={t}
                            onClick={() => setTone(t)}
                            className={`px-3 py-1.5 rounded-lg text-[10px] font-bold uppercase tracking-wider transition-all ${tone === t ? "bg-zinc-900 text-white shadow-sm" : "text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300"
                                }`}
                        >
                            {t}
                        </button>
                    ))}
                </div>
            </div>

            <div className="p-6 space-y-4">
                <div className="flex items-center gap-4 py-2 border-b border-zinc-100 dark:border-zinc-800">
                    <span className="text-xs font-medium text-zinc-400 w-12 shrink-0">Subject:</span>
                    <span className="text-xs font-bold text-zinc-900 dark:text-zinc-100">Partnership Proposal - AI Integration</span>
                </div>

                <div className="relative min-h-[200px] py-4">
                    <p className="text-sm text-zinc-600 dark:text-zinc-400 leading-relaxed">
                        Dear Team,<br /><br />
                        I hope this email finds you well. I'm reaching out to discuss a potential partnership regarding the integration of our new LLM stack into your existing workflow. Given your recent focus on scalability, I believe our solution could provide significant efficiency gains...
                    </p>
                    <div className="absolute bottom-0 right-0 p-3 rounded-2xl bg-gradient-to-br from-blue-500/10 to-violet-500/10 flex items-center gap-2 border border-blue-500/10">
                        <Sparkles className="h-4 w-4 text-blue-500 lg:animate-bounce" />
                        <span className="text-[10px] font-black text-blue-600 uppercase tracking-widest">AI Enhanced</span>
                    </div>
                </div>
            </div>

            <div className="px-6 py-4 border-t border-zinc-100 dark:border-zinc-800 flex items-center justify-between">
                <div className="flex items-center gap-4">
                    <button className="text-zinc-400 hover:text-zinc-600 transition-colors">
                        <Smile className="h-5 w-5" />
                    </button>
                    <button className="text-zinc-400 hover:text-zinc-600 transition-colors">
                        <Paperclip className="h-5 w-5" />
                    </button>
                </div>
                <button className="flex items-center gap-2 px-6 py-2 rounded-xl bg-blue-600 text-white text-xs font-bold hover:bg-blue-700 transition-all shadow-lg shadow-blue-500/20">
                    Send Draft
                    <Send className="h-3.5 w-3.5" />
                </button>
            </div>
        </div>
    );
}