import type { MemorialData } from "@/types";
import { formatDates, MemorialFooter } from "./shared";

export function TemplateSerene({ data }: { data: MemorialData }) {
  const sortedImages = [...data.images].sort((a, b) => a.order - b.order);
  const dates = formatDates(data.bornDate, data.passedDate);

  return (
    <div className="min-h-screen bg-white">
      <div className="mx-auto max-w-xl px-6 py-20 md:py-28">
        <div className="text-center">
          {sortedImages.length > 0 && (
            <div className="mx-auto mb-8 h-40 w-40 overflow-hidden rounded-full shadow-lg">
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img src={sortedImages[0].url} alt={data.title || "Спомен"} className="h-full w-full object-cover object-top" />
            </div>
          )}

          <h1 className="text-3xl font-light tracking-tight text-zinc-900 md:text-5xl">
            {data.title || "Во спомен на"}
          </h1>

          {dates && (
            <p className="mt-3 text-sm tracking-[0.2em] text-zinc-400 uppercase">{dates}</p>
          )}

          <div className="mx-auto mt-6 h-px w-12 bg-blue-200" />
        </div>

        {data.description && (
          <div className="mt-10 border-l-2 border-blue-100 pl-6">
            <p className="text-base leading-7 text-zinc-600 whitespace-pre-wrap md:text-lg">
              {data.description}
            </p>
          </div>
        )}

        {sortedImages.length > 1 && (
          <div className="mt-12 flex gap-4 overflow-x-auto pb-4">
            {sortedImages.slice(1).map((img) => (
              <div key={img.id} className="flex-shrink-0">
                {/* eslint-disable-next-line @next/next/no-img-element */}
                <img src={img.url} alt="" className="h-56 w-auto rounded-lg shadow-sm object-cover" />
              </div>
            ))}
          </div>
        )}

        <MemorialFooter name={data.title} />
      </div>
    </div>
  );
}
