"use client";

import MemorialPreview from "./MemorialPreview";

interface TemplatePickerProps {
  value: number;
  onChange: (value: number) => void;
  title: string;
  description: string;
  bornDate: string;
  passedDate: string;
  images: { url: string; order: number }[];
}

const TEMPLATES = [
  { id: 1, name: "Елеганција", tagline: "Серифна топлина, достоенственEMA" },
  { id: 2, name: "Кинематски", tagline: "Смело, потопно, целосно екранско" },
  { id: 3, name: "Спокој", tagline: "Мирно, центрирано, духовно" },
];

export default function TemplatePicker({ value, onChange, title, description, bornDate, passedDate, images }: TemplatePickerProps) {
  return (
    <div className="space-y-4">
      <p className="text-sm text-stone-600">Изберете како ќе изгледа спомен страницата. Скролајте за цел преглед.</p>

      <div className="grid grid-cols-3 gap-3">
        {TEMPLATES.map((t) => (
          <button
            key={t.id}
            onClick={() => onChange(t.id)}
            className={`rounded-lg border-2 px-3 py-2 text-left transition-colors ${
              value === t.id
                ? "border-primary bg-primary/5"
                : "border-stone-200 hover:border-stone-300"
            }`}
          >
            <p className="text-sm font-semibold text-stone-900">{t.name}</p>
            <p className="mt-0.5 text-xs text-stone-500">{t.tagline}</p>
          </button>
        ))}
      </div>

      {value && (
        <div className="space-y-2">
          <p className="text-xs font-medium text-stone-500 uppercase tracking-wider">Преглед во живо</p>
          <div className="overflow-hidden rounded-lg border border-stone-300 shadow-md">
            <div className="h-[500px] overflow-y-auto">
              <MemorialPreview
                templateId={value}
                title={title}
                description={description}
                bornDate={bornDate}
                passedDate={passedDate}
                images={images}
              />
            </div>
          </div>
        </div>
      )}
    </div>
  );
}