import React from 'react';
import Link from 'next/link';

const HoverShaligram = () => {
  return (
    <div className="grid grid-cols-3 gap-4 w-full">
      <div className='w-full'>
        <h3 className="font-bold mb-2">Shaligram Types</h3>
        <ul className="space-y-1">
          <li><Link href="/shaligram/vishnu">Vishnu Shaligram</Link></li>
          <li><Link href="/shaligram/lakshmi">Lakshmi Shaligram</Link></li>
          <li><Link href="/shaligram/narayan">Narayan Shaligram</Link></li>
          {/* Add more Shaligram types as needed */}
        </ul>
      </div>
      <div>
        <h3 className="font-bold mb-2">Benefits</h3>
        <ul className="space-y-1">
          <li>Spiritual Growth</li>
          <li>Protection</li>
          <li>Prosperity</li>
          {/* Add more benefits as needed */}
        </ul>
      </div>
      <div>
        <h3 className="font-bold mb-2">Resources</h3>
        <ul className="space-y-1">
          <li><Link href="/shaligram/care">Care Instructions</Link></li>
          <li><Link href="/shaligram/history">History of Shaligram</Link></li>
          <li><Link href="/shaligram/faq">FAQ</Link></li>
        </ul>
      </div>
    </div>
  );
};

export default HoverShaligram;