import Breadcumb from "@/src/components/Breadcumb";
import PagginationFuntion from "@/src/components/PagginationFuntion";
import BlogBan from "@/src/components/services-details-banner/blog";
import ConsenHead from "@/src/ConsenHead";
import Layout from "@/src/layout/Layout";
import { getPagination, pagination } from "@/src/utils";
import { BlogData } from "@/utils/constant.utils";
import Link from "next/link";
import { useEffect, useState } from "react";
const Blog = () => {
    let sort = 3;
    const [active, setActive] = useState(1);
    const [state, setstate] = useState([]);
    useEffect(() => {
        pagination(".single_box_", sort, active);
        let list = document.querySelectorAll(".single_box_");
        setstate(getPagination(list.length, sort));
    }, [active]);



    return (
        <>
            <ConsenHead title="Blogs - Web Development, SEO & Digital Marketing"
                description="Discover blogs on website development, mobile apps, SEO, digital marketing, UI/UX, and graphic design with insights from MetatronCube India." />
            <Layout>
                <BlogBan pageName={"BLOG"} />
                <div className="blog-area style-two page">
                    <div className="container">
                        <div className="row">
                            {
                                BlogData?.map((blog) => {
                                    return (
                                        <div className="col-lg-4 col-md-6 single_box_" key={blog?.id}>
                                            <div className="single-blog-box">
                                                <div className="single-blog-thumb">
                                                    <img src={blog?.image} alt={blog?.slug} />
                                                    <div className="blog-top-button">
                                                        <a href="#"> {blog?.category} </a>
                                                    </div>
                                                </div>
                                                <div className="em-blog-content">
                                                    <div className="meta-blog-text">
                                                        <p> {blog?.date} </p>
                                                    </div>
                                                    <div className="em-blog-title">
                                                        <h2>
                                                            <Link legacyBehavior href={`${blog?.slug}`}>
                                                                <a>
                                                                    {blog?.title.length > 50
                                                                        ? blog.title.substring(0, 40) + '...'
                                                                        : blog.title}
                                                                </a>
                                                            </Link>
                                                        </h2>

                                                    </div>
                                                    <div className="em-blog-icon">
                                                        <div className="em-blog-thumb">
                                                            <img src="\assets\images\blog\blog-user-cal\admin.webp" alt={blog?.user} />
                                                        </div>
                                                        <div className="em-blog-icon-title">
                                                            <h6> {blog?.user} </h6>
                                                        </div>
                                                    </div>
                                                    <div className="blog-button">
                                                        <Link legacyBehavior href={`${blog?.slug}`}>
                                                            <a>
                                                                {" "}
                                                                Learn More <i className="bi bi-plus" />{" "}
                                                            </a>
                                                        </Link>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    )
                                })
                            }
                            <div className="col-12">
                                <div className="pagination justify-content-center mt-4">
                                    <PagginationFuntion
                                        setActive={setActive}
                                        active={active}
                                        state={state}

                                    />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </Layout>
        </>
    );
};
export default Blog;