AI Content Calendar

"use client";

import React from "react";
import { Calendar, Sparkles, Clock, MoreHorizontal } from "lucide-react";

const events = [
    { id: "1", type: "Blog", title: "Future of AI UI", status: "Suggested", time: "Mon, 10:00 AM" },
    { id: "2", type: "Social", title: "Showcase: Data Viz", status: "Published", time: "Tue, 2:00 PM" },
    { id: "3", type: "Email", title: "Monthly AI Digest", status: "Scheduled", time: "Fri, 9:00 AM" },
];

export default function AIContentCalendar() {
    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-sm mx-auto">
            <div className="flex items-center justify-between mb-8">
                <div className="flex items-center gap-2">
                    <Calendar className="h-4 w-4 text-blue-500" />
                    <h3 className="text-sm font-bold text-zinc-900 dark:text-zinc-100 tracking-tight">AI Strategy Feed</h3>
                </div>
                <button className="p-2 rounded-lg bg-blue-500/10 text-blue-600 lg:animate-pulse">
                    <Sparkles className="h-3.5 w-3.5" />
                </button>
            </div>

            <div className="space-y-4">
                {events.map((e) => (
                    <div key={e.id} className="group relative flex items-start gap-4 p-3 rounded-xl border border-zinc-100 dark:border-zinc-800 bg-zinc-50/30 dark:bg-zinc-900/30 hover:bg-white dark:hover:bg-zinc-800 transition-all hover:shadow-lg hover:shadow-zinc-200/20 dark:hover:shadow-black">
                        <div className="pt-1">
                            <div className={`h-2 w-2 rounded-full ${e.status === "Published" ? "bg-emerald-500" : e.status === "Scheduled" ? "bg-blue-500" : "bg-amber-500"
                                }`} />
                        </div>
                        <div className="flex-1 min-w-0">
                            <div className="flex items-center justify-between mb-1">
                                <p className="text-[10px] font-black uppercase tracking-[0.2em] text-zinc-400">{e.type}</p>
                                <span className="text-[9px] font-bold text-zinc-400 flex items-center gap-1">
                                    <Clock className="h-2.5 w-2.5" />
                                    {e.time}
                                </span>
                            </div>
                            <h4 className="text-sm font-bold text-zinc-900 dark:text-zinc-100 leading-tight mb-2">{e.title}</h4>
                            <div className="flex items-center justify-between">
                                <span className={`text-[9px] font-bold px-1.5 py-0.5 rounded ${e.status === "Published" ? "bg-emerald-100 text-emerald-600 dark:bg-emerald-900/30 dark:text-emerald-400" :
                                        e.status === "Scheduled" ? "bg-blue-100 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400" :
                                            "bg-amber-100 text-amber-600 dark:bg-amber-900/30 dark:text-amber-400"
                                    }`}>
                                    {e.status}
                                </span>
                                <button className="opacity-0 group-hover:opacity-100 transition-opacity">
                                    <MoreHorizontal className="h-3.5 w-3.5 text-zinc-400" />
                                </button>
                            </div>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    );
}