Prompt Library Card

"use client";

import React from "react";
import { FolderHeart, Star, User, MoreHorizontal, Copy } from "lucide-react";

export default function PromptLibraryCard() {
    return (
        <div className="rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 p-5 shadow-sm w-full max-w-sm mx-auto group hover:border-violet-500/50 transition-all">
            <div className="flex items-start justify-between mb-4">
                <div className="h-10 w-10 rounded-xl bg-violet-50 dark:bg-violet-900/30 text-violet-600 flex items-center justify-center">
                    <FolderHeart className="h-5 w-5" />
                </div>
                <div className="flex items-center gap-1.5 px-2 py-1 rounded-full bg-zinc-50 dark:bg-zinc-900 border border-zinc-100 dark:border-zinc-800">
                    <Star className="h-3 w-3 text-amber-500 fill-amber-500" />
                    <span className="text-[10px] font-bold text-zinc-600">4.8</span>
                </div>
            </div>

            <h3 className="text-sm font-bold text-zinc-900 dark:text-zinc-100 mb-1.5">Legal Draftsman v4</h3>
            <p className="text-xs text-zinc-500 leading-relaxed mb-4">Generates iron-clad contract clauses based on regional jurisdictional laws.</p>

            <div className="flex items-center gap-3 mb-6">
                <div className="flex -space-x-2">
                    {[1, 2, 3].map(i => (
                        <div key={i} className="h-6 w-6 rounded-full border-2 border-white dark:border-zinc-950 bg-zinc-100 dark:bg-zinc-800 flex items-center justify-center overflow-hidden">
                            <User className="h-3 w-3 text-zinc-400" />
                        </div>
                    ))}
                </div>
                <span className="text-[10px] text-zinc-400 font-bold uppercase tracking-widest">+1.2k users</span>
            </div>

            <div className="flex items-center gap-2">
                <button className="flex-1 flex items-center justify-center gap-2 py-2 rounded-lg bg-zinc-900 text-white text-[10px] font-bold hover:opacity-90 transition-all">
                    <Copy className="h-3 w-3" />
                    DUPLICATE
                </button>
                <button className="p-2 rounded-lg border border-zinc-200 dark:border-zinc-800 hover:bg-zinc-50 transition-colors">
                    <MoreHorizontal className="h-4 w-4 text-zinc-400" />
                </button>
            </div>
        </div>
    );
}