import Link from "next/link";
import { ArrowRight } from "lucide-react";
import { galleryImages as mockGalleryImages } from "@/lib/mock-data";
import type { PublicGalleryImage } from "@/lib/db-data";

type GalleryPreviewProps = {
  galleryImages?: PublicGalleryImage[];
};

export function GalleryPreview({ galleryImages = mockGalleryImages }: GalleryPreviewProps) {
  return (
    <section className="bg-white py-3">
      <div className="container-custom">
        <div className="mb-4 flex items-center justify-between gap-4">
          <div className="flex items-center gap-3">
            <span className="h-1 w-9 rounded-full bg-primary" />
            <h2 className="text-sm font-extrabold uppercase tracking-[0.08em] text-navy-deep md:text-base">
              Gallery
            </h2>
          </div>
          <Link
            href="/gallery"
            className="inline-flex items-center gap-2 text-sm font-semibold text-primary"
          >
            View Full Gallery <ArrowRight className="h-4 w-4" />
          </Link>
        </div>
        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-5">
          {galleryImages.slice(0, 5).map((image, index) => (
            <Link
              key={image.id}
              href="/gallery"
              className={index === 0 ? "sm:col-span-2 lg:col-span-1" : ""}
            >
              <img
                src={image.image}
                alt={image.alt}
                className="h-56 w-full rounded-lg border border-border object-cover shadow-card lg:h-44"
              />
            </Link>
          ))}
        </div>
      </div>
    </section>
  );
}