import Cart from "@comp/Pages/BlogComponents/Cart";
import Link from "next/link";
import React from "react";

const Blogs = ({ data }) => {
  return (
    <section className="xs:my-20 lg:mt-20 lg:pt-20">
      <div className="xs:px-3 md:px-10 md:container md:mx-auto mb-10">
        <div className="grid xs:grid-cold-1 md:grid-cols-1 gap-4 rtl mt-10">
          <div className=" p-5 flex">
            <div className="flex flex-col justify-center items-center mt-5 absolute  ">
              <div className="w-5 h-20 rounded-full bg-primary-900" />
            </div>

            <div className="mx-4 ">
              <div className="p-4 mt-2">
                <p className="mb-0 text-gray-900  font-extralight text-sm ">
                  چرا حامیان عدالت
                </p>
                <h2 className="font-extrabold xs:text-3xl lg:text-3xl text-gray-900   mt-2">
                  مجله حامیان عدالت
                </h2>
              </div>
            </div>
          </div>
        </div>

        <div className="grid xs:grid-cols-1 lg:grid-cols-4 mt-10 gap-5">
          {data?.blogs.map((e, index) => (
            <Cart
              categoryName={e.categoryName}
              title={e.title}
              mainImage={e.mainImage}
              slug={e.slug}
              id={e.id}
              key={index}
            />
          ))}
        </div>

        <div className="flex justify-center">
          <Link href={`/blogs?page=0`}>
            <div className="btn btn-outline-primary rounded-2xl mt-20">
              مشاهده مجله حامیان عدالت
            </div>
          </Link>
        </div>
      </div>
    </section>
  );
};

export default Blogs;
