import React from "react";
import { motion } from "framer-motion";
import clsx from "clsx"; // Import clsx for handling dynamic classes

const HoverableIconList = ({
  title,
  items,
  color = "red", // Default color set to "pink"
  hoveredItem,
  setHoveredItem,
  getKey,
}) => {
  // Dynamically constructing class names using clsx
  const borderClass = `${color}-400`; // e.g., "yellow-400"
  const shadowClass = `${color}-500`; // e.g., "yellow-500"

  return (
    <div className="relative mx-auto text-center">
      <h2
        className={clsx(
          "text-2xl font-sans font-semibold mb-8 text-orange-400",
          `text-${color}-400`
        )}
      >
        {title}
      </h2>
      <div className="flex gap-7 flex-wrap justify-center">
        {items.map((item, index) => (
          <div
            key={getKey(item, index)}
            className="relative flex flex-col items-center mb-2 group"
            onMouseEnter={() => setHoveredItem(index)}
            onMouseLeave={() => setHoveredItem(null)}
          >
            <motion.img
              alt={item.name}
              src={item.logo}
              className={clsx(
                "p-2 w-[70px] h-[70px] rounded-full transition-all duration-100 group-hover:scale-110",
                hoveredItem === index &&
                  `border-4 border-${borderClass} shadow-lg shadow-${shadowClass}`
              )}
            />
            {hoveredItem === index && (
              <div className="absolute bottom-full mb-8 bg-black text-white text-sm font-bold rounded-md px-8 py-3 shadow-lg">
                {item.name}
              </div>
            )}
          </div>
        ))}
      </div>
    </div>
  );
};

export default HoverableIconList;