"use client";

import Image from "next/image";

export default function HeaderFeaturedHomes() {
  const images = [
    "/images/featured-properties-17-480x287.jpg",
    "/images/featured-properties-17-480x287.jpg",
    "/images/featured-properties-17-480x287.jpg",
    "/images/featured-properties-17-480x287.jpg",
    "/images/featured-properties-17-480x287.jpg",
    "/images/featured-properties-17-480x287.jpg",
  ];

  return (
    <div className="p-2">
      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-1">
        {images.map((src, index) => (
          <div
            key={index}
            className="overflow-hidden rounded-lg shadow hover:shadow-lg transition-shadow duration-300 relative h-16"
          >
            <Image
              src={src}
              alt={`Gallery image ${index + 1}`}
              className="object-cover transform transition-transform duration-300 hover:scale-105 cursor-pointer"
              fill
            />
          </div>
        ))}
      </div>
    </div>
  );
}