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

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

  return (
    <div className="min-h-screen bg-stone-50 font-serif">
      {heroImage && (
        <div className="relative h-[55vh] w-full overflow-hidden">
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img src={heroImage.url} alt={data.title || "Спомен"} className="h-full w-full object-cover object-top" />
          <div className="absolute inset-0 bg-gradient-to-t from-stone-900/70 via-stone-900/20 to-transparent" />
          <div className="absolute bottom-10 left-0 right-0 text-center">
            <h1 className="text-4xl font-bold tracking-wide text-white md:text-6xl drop-shadow-lg">
              {data.title || "Во спомен на"}
            </h1>
            {dates && (
              <p className="mt-3 text-lg tracking-widest text-stone-200 uppercase drop-shadow">
                {dates}
              </p>
            )}
          </div>
        </div>
      )}

      {!heroImage && (
        <div className="mx-auto max-w-2xl px-6 pt-24 text-center">
          <h1 className="text-4xl font-bold tracking-wide text-stone-900 md:text-6xl">
            {data.title || "Во спомен на"}
          </h1>
          {dates && (
            <p className="mt-4 text-lg tracking-widest text-stone-400 uppercase">{dates}</p>
          )}
          <div className="mx-auto mt-6 h-px w-16 bg-amber-400" />
        </div>
      )}

      <div className="mx-auto max-w-3xl px-6 py-14">
        {data.description && (
          <div className="text-center">
            <p className="text-lg leading-relaxed text-stone-700 whitespace-pre-wrap md:text-xl">
              {data.description}
            </p>
          </div>
        )}

        {gridImages.length > 0 && (
          <div className="mt-14 grid grid-cols-1 gap-4 sm:grid-cols-2">
            {gridImages.map((img) => (
              <div key={img.id} className="overflow-hidden rounded-lg shadow-md">
                {/* eslint-disable-next-line @next/next/no-img-element */}
                <img src={img.url} alt="" className="h-64 w-full object-cover transition-transform duration-500 hover:scale-105" />
              </div>
            ))}
          </div>
        )}

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