Prompt Template Editor

"use client";

import React from "react";
import { FileCode, Sparkles, Hash } from "lucide-react";

export default function PromptTemplateEditor() {
    const template = `## Role: Expert React Architect

## Task: 
Analyze the provided code and suggest {{optimization_depth}} level refactors.

## Constraints:
- Use {{styling_framework}} for styles.
- Maintain {{strict_mode}} compliance.

## Input Code:
{{source_code}}`;

    const highlighted = template.split(/(\{\{[^}]+\}\})/).map((part, i) => (
        part.startsWith("{{") ? (
            <span key={i} className="px-1.5 py-0.5 rounded bg-blue-100 dark:bg-blue-900/40 text-blue-600 dark:text-blue-400 font-bold">
                {part}
            </span>
        ) : part
    ));

    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="flex items-center justify-between px-6 py-4 border-b border-zinc-100 dark:border-zinc-800 bg-zinc-50/50 dark:bg-zinc-900/50">
                <div className="flex items-center gap-3">
                    <FileCode className="h-4 w-4 text-blue-500" />
                    <h3 className="text-sm font-bold text-zinc-900 dark:text-zinc-100">Template Engine</h3>
                </div>
                <div className="flex items-center gap-2">
                    <span className="text-[10px] font-black text-zinc-400 bg-zinc-200/50 dark:bg-zinc-800 px-2 py-0.5 rounded">Markdown</span>
                    <Sparkles className="h-3.5 w-3.5 text-amber-500" />
                </div>
            </div>

            <div className="p-8 bg-zinc-950/5 dark:bg-zinc-900/20 font-mono text-[13px] leading-relaxed text-zinc-600 dark:text-zinc-400 min-h-[300px] whitespace-pre-wrap">
                {highlighted}
            </div>

            <div className="px-6 py-4 border-t border-zinc-100 dark:border-zinc-800 flex items-center justify-between bg-zinc-50/30 dark:bg-zinc-900/30">
                <div className="flex items-center gap-4 text-[10px] font-black uppercase tracking-widest text-zinc-400">
                    <span className="flex items-center gap-1.5">
                        <Hash className="h-3 w-3" />
                        4 Dynamic Variables
                    </span>
                </div>
                <button className="px-4 py-2 rounded-lg bg-zinc-900 text-white text-[10px] font-bold hover:opacity-90 transition-all">
                    Save Template
                </button>
            </div>
        </div>
    );
}