import React from "react";
import { AspectRatio } from "@/components/ui/aspect-ratio";
import Image from "next/image";
import Link from "next/link";

export const ShowcaseSixPack = ({ images }: { images: string[] }) => {
  return (
    <div className="grid grid-cols-3 max-w-3xl gap-x-8 gap-y-4">
      {images.map((src, index) => (
        <Link key={index} href={`/product/${index + 1}`}>
          <div className="w-[250px] h-[250px]">
            <AspectRatio ratio={1 / 1} className="bg-muted rounded-xl">
              {/* Performance: Added sizes to optimize image delivery for smaller screens */}
              <Image
                src={src}
                alt={`Product image ${index + 1}`}
                fill
                className="object-cover rounded-xl"
                sizes="(max-width: 768px) 33vw, 250px"
              />
            </AspectRatio>
          </div>
          <p className="mt-4 ml-2 font-semibold">Schuhe</p>
        </Link>
      ))}
    </div>
  );
};