Prompt Variable Insert

"use client";

import React from "react";
import { Brackets, Type, Database, MoveHorizontal, ChevronRight } from "lucide-react";

export default function PromptVariableInsert() {
    const vars = [
        { name: "tone", type: "Option", icon: <Type className="h-3 w-3" /> },
        { name: "user_data", type: "Object", icon: <Database className="h-3 w-3" /> },
        { name: "format", type: "String", icon: <Brackets className="h-3 w-3" /> },
    ];

    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 overflow-hidden">
            <div className="flex items-center gap-2 mb-8">
                <MoveHorizontal className="h-4 w-4 text-zinc-500" />
                <h3 className="text-sm font-bold text-zinc-900 dark:text-zinc-100 uppercase tracking-widest">Variable Palette</h3>
            </div>

            <div className="space-y-2">
                {vars.map((v) => (
                    <button key={v.name} className="w-full flex items-center justify-between p-3 rounded-xl border border-zinc-100 dark:border-zinc-800 bg-zinc-50/50 dark:bg-zinc-900/50 hover:border-blue-500/50 hover:bg-blue-50/50 dark:hover:bg-blue-900/10 transition-all group">
                        <div className="flex items-center gap-3">
                            <div className="p-1.5 rounded-lg bg-white dark:bg-zinc-800 shadow-sm border border-zinc-100 dark:border-zinc-700 text-zinc-400 group-hover:text-blue-500">
                                {v.icon}
                            </div>
                            <div className="text-left leading-none">
                                <p className="text-xs font-bold text-zinc-900 dark:text-zinc-100">{"{{"}{v.name}{"}}"}</p>
                                <p className="text-[9px] font-black text-zinc-400 uppercase tracking-[0.2em] mt-1">{v.type}</p>
                            </div>
                        </div>
                        <ChevronRight className="h-3 w-3 text-zinc-300 opacity-0 group-hover:opacity-100 transition-opacity" />
                    </button>
                ))}
                <button className="w-full mt-4 py-2 border-2 border-dashed border-zinc-100 dark:border-zinc-800 rounded-xl text-[10px] font-black uppercase tracking-widest text-zinc-400 hover:border-zinc-200 transition-colors">
                    + New Variable
                </button>
            </div>
        </div>
    );
}