AI SEO Writer

"use client";

import React from "react";
import { Search, TrendingUp, CheckCircle2, ChevronRight } from "lucide-react";

export default function AISEOWriter() {
    const keywords = [
        { word: "AI Components", volume: "12.4K", score: 82 },
        { word: "Free React UI", volume: "8.2K", score: 94 },
        { word: "Tailwind AI Dashboards", volume: "2.1K", score: 65 },
    ];

    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-md mx-auto">
            <div className="flex items-center justify-between mb-8">
                <div className="flex items-center gap-2">
                    <Search className="h-4 w-4 text-emerald-500" />
                    <h3 className="text-sm font-bold text-zinc-900 dark:text-zinc-100">SEO Optimizer</h3>
                </div>
                <div className="h-10 w-10 rounded-full border-4 border-emerald-500/20 flex items-center justify-center relative">
                    <svg className="w-full h-full -rotate-90">
                        <circle cx="20" cy="20" r="16" fill="none" stroke="#10b981" strokeWidth="4" strokeDasharray="100" strokeDashoffset="12" className="transition-all duration-1000" />
                    </svg>
                    <span className="absolute text-[10px] font-black text-emerald-600">88</span>
                </div>
            </div>

            <div className="space-y-4 mb-8">
                <p className="text-[10px] font-black text-zinc-400 uppercase tracking-widest">Recommended Keywords</p>
                {keywords.map((k) => (
                    <div key={k.word} className="flex items-center justify-between p-3 rounded-xl bg-zinc-50/50 dark:bg-zinc-900/50 border border-zinc-100 dark:border-zinc-800">
                        <div className="flex items-center gap-3">
                            <TrendingUp className="h-3.5 w-3.5 text-emerald-500" />
                            <span className="text-xs font-bold text-zinc-900 dark:text-zinc-100">{k.word}</span>
                        </div>
                        <div className="flex items-center gap-3">
                            <span className="text-[10px] text-zinc-400">{k.volume}</span>
                            <div className={`h-1.5 w-8 rounded-full ${k.score > 80 ? "bg-emerald-500" : "bg-amber-500"}`} />
                        </div>
                    </div>
                ))}
            </div>

            <div className="space-y-3">
                <p className="text-[10px] font-black text-zinc-400 uppercase tracking-widest">Readability Analysis</p>
                <div className="flex items-center gap-3 p-3 rounded-lg border border-dashed border-zinc-200 dark:border-zinc-700">
                    <CheckCircle2 className="h-4 w-4 text-emerald-500 shrink-0" />
                    <p className="text-xs text-zinc-600 dark:text-zinc-400">Sentence length is optimal for mobile consumption.</p>
                </div>
                <button className="w-full flex items-center justify-between p-4 rounded-xl bg-zinc-900 text-white hover:opacity-90 transition-all font-bold text-xs mt-4">
                    Gen Meta Description
                    <ChevronRight className="h-4 w-4 opacity-50" />
                </button>
            </div>
        </div>
    );
}