"use client";

import { useMemo } from "react";
import { montarPromptFinal, type PromptTemplate } from "@/lib/prompt-builder";

type PromptPreviewProps = {
  answers: Record<string, string>;
  template?: PromptTemplate;
};

export default function PromptPreview({
  answers,
  template
}: PromptPreviewProps) {
  const preview = useMemo(
    () => montarPromptFinal(answers, template),
    [answers, template]
  );

  return (
    <section className="rounded-3xl border border-slate-200/80 bg-white/95 p-6 shadow-[0_24px_60px_-40px_rgba(15,23,42,0.6)]">
      <div className="flex flex-col gap-2">
        <p className="text-xs font-semibold uppercase tracking-[0.2em] text-slate-500">
          Preview em tempo real
        </p>
        <h2 className="text-2xl font-semibold text-slate-900">
          Prompt final estruturado
        </h2>
        <p className="text-sm text-slate-600">
          Ajuste as respostas e veja o prompt pronto para uso.
        </p>
      </div>
      <div className="mt-5 rounded-2xl border border-slate-200 bg-slate-950/95 p-5 text-sm text-slate-100">
        <pre className="whitespace-pre-wrap leading-relaxed">{preview}</pre>
      </div>
    </section>
  );
}