"use client";

import { TemplateElegance, TemplateCinematic, TemplateSerene } from "@/lib/templates";
import type { MemorialData } from "@/types";

interface MemorialPreviewProps {
  templateId: number;
  title: string;
  description: string;
  bornDate: string;
  passedDate: string;
  images: { url: string; order: number }[];
}

const PLACEHOLDER_IMAGES = [
  { id: "p1", url: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='600'%3E%3Crect fill='%23d4d4d8' width='800' height='600'/%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' font-family='sans-serif' font-size='24' fill='%2371717a'%3EPhoto%3C/text%3E%3C/svg%3E", key: "p1", order: 1 },
  { id: "p2", url: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='600'%3E%3Crect fill='%23a1a1aa' width='800' height='600'/%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' font-family='sans-serif' font-size='24' fill='%23ffffff'%3EPhoto%3C/text%3E%3C/svg%3E", key: "p2", order: 2 },
];

export default function MemorialPreview({
  templateId,
  title,
  description,
  bornDate,
  passedDate,
  images,
}: MemorialPreviewProps) {
  const data: MemorialData = {
    id: "preview",
    title: title || "Name Surname",
    description: description || "A beloved soul who touched the lives of many and will forever be remembered.",
    bornDate: bornDate || null,
    passedDate: passedDate || null,
    subdomain: "preview",
    templateId,
    published: true,
    images: images.length > 0
      ? images.map((img, i) => ({ id: `img-${i}`, url: img.url, key: `key-${i}`, order: img.order }))
      : PLACEHOLDER_IMAGES,
  };

  return (
    <div className="pointer-events-none select-none">
      {templateId === 1 && <TemplateElegance data={data} />}
      {templateId === 2 && <TemplateCinematic data={data} />}
      {templateId === 3 && <TemplateSerene data={data} />}
    </div>
  );
}