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

const ExplorePooja = () => {
  const poojaServices = [
    {
      imgUrl: "/online-pooja/rudraksha-prana-pratishtha-pooja-246.webp",
      title: "Rudraksha Prana Pratishtha Pooja",
      price: "Rs. 25,500.00",
    },
    {
      imgUrl: "/online-pooja/maha-mrityunjaya-pooja-397.webp",
      title: "Maha Mrityunjaya Pooja",
      price: "Rs. 17,000.00",
    },
    {
      imgUrl: "/online-pooja/maha-shivaratri-pooja-at-pashupatinath-437.webp",
      title: "Maha Shivaratri Pooja at Pashupatinath",
      price: "Rs. 25,700.00",
    },
    {
      imgUrl: "/online-pooja/karya-siddhi-ganesh-pooja-672.webp",
      title: "Karya Siddhi Ganesh Pooja",
      price: "Rs. 59,700.00",
    },
    {
      imgUrl: "/online-pooja/lagu-rudri-path-12-brahmin-273.webp",
      title: "Lagu Rudri Path (12 Brahmin)",
      price: "Rs. 102,200.00",
    },
    {
      imgUrl: "/online-pooja/navagraha-shanti-pooja-817.webp",
      title: "Navagraha Shanti Pooja",
      price: "Rs. 17,000.00",
    },
    {
      imgUrl: "/online-pooja/rudra-abishek-pooja-778.webp",
      title: "Rudra Abishek Pooja",
      price: "Rs. 68,100.00",
    },
    {
      imgUrl: "/online-pooja/laxmi-narayan-pooja-222.webp",
      title: "Laxmi Narayan Pooja",
      price: "Rs. 42,600.00",
    },
    {
      imgUrl: "/online-pooja/lagu-rudri-path-12-brahmin-273.webp",
      title: "Pooja Subscription",
      price:
        "Rs. 42,600.00",
    },
  ];

  return (
    <div className="min-h-[60vh]">
      <h1 className="sm:text-5xl text-2xl py-6 text-center">Explore Pooja</h1>
      <div className=" flex justify-center items-center p-4 flex-wrap gap-6">
        {poojaServices.map((item,i) => {
          return (
            <div key={i}>
              <div className="h-[300px] w-[300px] bg-slate-100">
                <Link href={`/products/${item.title}`} ><Image height={300} width={300} alt='images' className='h-full w-full' src={item.imgUrl} /></Link>
              </div>
              <h2 className="my-2">{item.title}</h2>
              <h2>{item.price}</h2>
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default ExplorePooja;