// import { motion } from "framer-motion";
// import { Link } from "react-router-dom";

// const TrendingCard = ({ title, img, href }) => {
//   return (
//     <motion.div
//       whileHover={{ scale: 1.04 }}
//       className="bg-white rounded-xl shadow-sm hover:shadow-md overflow-hidden transition-all"
//     >
//       <Link to={href}>
//         <img
//           src={img}
//           alt={title}
//           className="w-full h-36 object-cover"
//         />
//         <div className="p-3 text-center">
//           <h4 className="text-sm font-semibold text-gray-800">
//             {title}
//           </h4>
//         </div>
//       </Link>
//     </motion.div>
//   );
// };

// export default TrendingCard;




import { motion } from "framer-motion";
import { Link } from "react-router-dom";

const TrendingCard = ({ title, img, href }) => {
  return (
    <motion.div
      whileHover={{ scale: 1.05 }}
      className="relative bg-white rounded-2xl shadow-lg overflow-hidden cursor-pointer transition-all duration-300"
    >
      <Link to={href}>
        {/* Image */}
        <img
          src={img || "/default-product.png"}
          alt={title}
          className="w-full h-44 md:h-52 object-cover transition-transform duration-500 hover:scale-105"
        />

        {/* Gradient Overlay */}
        <div className="absolute inset-0 bg-gradient-to-t from-black/30 via-transparent to-transparent"></div>

        {/* Title */}
        <div className="absolute bottom-3 left-3 right-3 text-center">
          <h4 className="text-white font-semibold text-sm md:text-base drop-shadow-md">
            {title}
          </h4>
        </div>
      </Link>
    </motion.div>
  );
};

export default TrendingCard;