import React from "react";
import CardNormal from "src/components/Cards/CardNormal/page";

const Content = ({ products }) => {
  return (
    <div className="px-2 pb-20">
      <div className="flex">
        <div>
          <h1 className="text-3xl font-bold  text-left ">
            Product Listing Page
          </h1>
          <p className="mb-0 text-sm text-gray-400 xs:text-center lg:text-left">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis,{" "}
          </p>
        </div>
      </div>
      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 mt-10">
        {products.map((product, index) => (
          <div key={index} className="relative">
            <CardNormal data={product} priority />
          </div>
        ))}
      </div>
    </div>
  );
};

export default Content;
