import Image from "next/image";
import Link from "next/link";
import { SectionHeading } from "@/components/ui/SectionHeading";
import { FallbackArt } from "@/components/ui/FallbackArt";
import { destinations } from "@/content/destinations";
import type { Dictionary, Locale } from "@/content/types";
import type { GalleryPhoto } from "@/generated/prisma/client";

export function Destinations({
  dict,
  locale,
  photos,
}: {
  dict: Dictionary;
  locale: Locale;
  photos: GalleryPhoto[];
}) {
  return (
    <section id="destinations" className="mx-auto max-w-7xl px-4 py-24 sm:px-6 lg:px-8">
      <SectionHeading
        eyebrow={dict.destinationsSection.eyebrow}
        title={dict.destinationsSection.title}
        titleAccent={dict.destinationsSection.titleAccent}
        subtitle={dict.destinationsSection.subtitle}
      />
      <div className="mt-16 grid grid-cols-2 gap-4 sm:gap-6 lg:grid-cols-4">
        {destinations.map((destination) => {
          const photo = photos.find((p) => p.destinationSlug === destination.slug);
          const name = locale === "ar" ? destination.nameAr : destination.nameEn;
          const description =
            locale === "ar" ? destination.descriptionAr : destination.descriptionEn;
          return (
            <Link
              key={destination.slug}
              href={`/${locale}/destinations/${destination.slug}`}
              className="group relative block aspect-[3/4] overflow-hidden rounded-2xl"
            >
              {photo ? (
                <Image
                  src={photo.imageUrl}
                  alt={name}
                  fill
                  sizes="(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw"
                  className="object-cover transition-transform duration-500 group-hover:scale-105"
                />
              ) : (
                <FallbackArt />
              )}
              <div className="absolute inset-0 bg-gradient-to-t from-charcoal-950/90 via-charcoal-950/10 to-transparent" />
              <div className="absolute inset-x-0 bottom-0 p-5">
                <h3 className="font-semibold text-white">{name}</h3>
                <p className="mt-1 line-clamp-2 text-xs text-white/70">{description}</p>
              </div>
            </Link>
          );
        })}
      </div>
    </section>
  );
}