// import TrendingCard from "./TrendingCard";

// const smallTrendingData = [
//   { title: "Sarees", img: "/hero1.jpg", href: "/sarees" },
//   { title: "Lehengas", img: "/hero2.jpg", href: "/lehenga" },
//   { title: "Kurtas", img: "/hero3.jpg", href: "/kurtas" },
//   { title: "Patola", img: "/hero1.jpg", href: "/patola" },
// ];

// const TrendingSmallGrid = () => {
//   return (
//     <section>
//       <h2 className="text-xl font-bold text-gray-900 px-3 mb-3">
//         Trending Categories
//       </h2>

//       <div className="grid grid-cols-2 gap-3 px-3">
//         {smallTrendingData.map((item, i) => (
//           <TrendingCard key={i} {...item} />
//         ))}
//       </div>
//     </section>
//   );
// };

// export default TrendingSmallGrid;




import TrendingCard from "./TrendingCard";

const smallTrendingData = [
  { title: "Sarees", img: "/hero1.png", href: "/sarees" },
  { title: "Lehengas", img: "/hero2.png", href: "/lehenga" },
  { title: "Kurtas", img: "/hero3.png", href: "/kurtas" },
  { title: "Patola", img: "/hero1.png", href: "/patola" },
];

const TrendingSmallGrid = () => {
  return (
    <section className="py-6 px-4 md:px-10">
      <h2 className="text-2xl font-bold text-gray-900 mb-5">Trending Categories</h2>

      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
        {smallTrendingData.map((item, i) => (
          <TrendingCard key={i} {...item} />
        ))}
      </div>
    </section>
  );
};

export default TrendingSmallGrid;