import Image from "next/image";
import Link from "next/link";
import React from "react";

const ListOfShaligram = () => {
  const shaligrams = [
    {
      title: "Buddha Shaligram",
      imageUrl: "/shaligram/buddha-shaligram-829.webp",
    },
    {
      title: "Matsya Shaligram",
      imageUrl: "/shaligram/matsya-shaligram-614.webp",
    },
    {
      title: "Narsimha Shaligram",
      imageUrl: "/shaligram/narasimha-shaligram-977.webp",
    },
    {
      title: "Parashurama Shaligram",
      imageUrl: "/shaligram/parashurama-shaligram-855.webp",
    },
    {
      title: "Rama Shaligram",
      imageUrl: "/shaligram/rama-shaligram-313.webp",
    },
    {
      title: "Vamana Shaligram",
      imageUrl: "/shaligram/vamana-shaligram-750.webp",
    },
  ];

  return (
    <div className="p-4">
      <h1 className="sm:text-5xl font-serif text-zinc-800 mt-10 text-center py-8">
        Vishnu Dashavatar Shaligrams
      </h1>
      <div className="flex  flex-wrap gap-7 max-w-6xl mx-auto">
        {shaligrams.map((item, index) => (
          <>
            <div key={index} className="flex flex-col ">
              <Link href={`/products/${item.title}`}>
                <div className="bg-[#dfdbdf] p-4 sm:w-[320px] w-[150px] h-[200px] sm:h-[280px]">
                  <Image
                    src={item.imageUrl}
                    alt={item.title}
                    width={320} 
                    height={260} 
                    className="w-full sm:h-[260px] object-cover rounded"
                  />
                </div>
              </Link>

              <h3 className="sm:text-xl w- font-semibold mb-2">{item.title}</h3>
            </div>
          </>
        ))}
      </div>
    </div>
  );
};

export default ListOfShaligram;