import React, { useState } from 'react';
import { ChevronRight } from 'lucide-react';

const rudrakshaData = {
  title: "Rudraksha",
  subtitle: "Explore the World's largest collection of Authentic A+ Grade Gupta Rudraksha.",
  buttonText: "View All Collection",
  columns: [
    [
      { name: "Nirakar (0) Mukhi" },
      { name: "1 Mukhi" },
      { name: "2 Mukhi" },
      { name: "3 Mukhi" },
      { name: "4 Mukhi" },
      { name: "5 Mukhi" },
      { name: "6 Mukhi" }
    ],
    [
      { name: "7 Mukhi" },
      { name: "8 Mukhi" },
      { name: "9 Mukhi" },
      { name: "10 Mukhi" },
      { name: "11 Mukhi" },
      { name: "12 Mukhi" },
      { name: "13 Mukhi" }
    ],
    [
      { name: "14 Mukhi" },
      { name: "15 Mukhi" },
      { name: "16 Mukhi" },
      { name: "17 Mukhi" },
      { name: "18 Mukhi" },
      { name: "19 Mukhi" },
      { name: "20 Mukhi" }
    ],
    [
      { name: "21 Mukhi" },
      { name: "22 Mukhi" },
      { name: "23 Mukhi" },
      { name: "24 Mukhi" },
      { name: "25 Mukhi" },
      { name: "26 Mukhi" }
    ],
    [
      { name: "Trijuti Rudraksha" },
      { name: "Gauri Shankar Rudraksha" },
      { name: "Ganesh Rudraksha" },
      { name: "Garbha Gauri Rurdaksha" }
    ]
  ]
};

const HoverRudrakshaContent = () => {
  const [selectedMukhi, setSelectedMukhi] = useState(null);

  return (
    <div className="bg-gradient-to-r from-orange-100 to-red-100 max-h-[50vh] min-w-[100vw] overflow-y-auto p-8">
      <div className=" mx-auto bg-white rounded-xl shadow-2xl overflow-hidden">
        <div className="md:flex">
          <div className=" bg-orange-600 text-white p-8">
            <h2 className="text-4xl font-bold mb-4">{rudrakshaData.title}</h2>
            <p className="mb-8 text-lg">{rudrakshaData.subtitle}</p>
            <button className="bg-white text-orange-600 px-6 py-3 rounded-full font-semibold hover:bg-orange-100 transition duration-300">
              {rudrakshaData.buttonText}
            </button>
          </div>
          <div className=" p-8">
            <div className="grid md:grid-cols-5 gap-6">
              {rudrakshaData.columns.map((column, columnIndex) => (
                <div key={columnIndex}>
                  {column.map((item, itemIndex) => (
                    <div
                      key={itemIndex}
                      className="mb-2 cursor-pointer group"
                      onClick={() => setSelectedMukhi(item.name)}
                    >
                      <div className="flex items-center space-x-2 p-2 rounded-lg hover:bg-orange-100 transition duration-300">
                        <ChevronRight className="text-orange-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300" size={16} />
                        <span className="text-sm font-medium text-gray-700 group-hover:text-orange-600">{item.name}</span>
                      </div>
                    </div>
                  ))}
                </div>
              ))}
            </div>
          </div>
        </div>
        {selectedMukhi && (
          <div className="p-4 bg-orange-100 text-center">
            <p className="text-lg font-semibold text-orange-800">Selected: {selectedMukhi}</p>
          </div>
        )}
      </div>
    </div>
  );
};

export default HoverRudrakshaContent;