"use client";

import React, { useEffect, useState } from "react";
import "./Blog.css";
import Breadcrumb_comp from "../common-components/breadcrumb-comp/Breadcrumb_comp";
import Blog_card from "./blog_card/Blog_card";
import { useDispatch, useSelector } from "react-redux";
import { getblog } from "../../features/blog/Slice";

function Blog() {
  const breadcrumbs = [
    { label: "Home", link: "/", isActive: false },
    { label: "Blog", link: "", isActive: true },
  ];

  const [currentPage, setCurrentPage] = useState(1);

  const blog = useSelector((state) => state.blog.blog);
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getblog());
  }, [dispatch]);

  const itemsPerPage = 8;

  const totalPages = Math.ceil(blog?.data?.length / itemsPerPage);

  const handlePageChange = (pageNum) => {
    if (pageNum >= 1 && pageNum <= totalPages) {
      setCurrentPage(pageNum);
    }
  };

  const paginatedData = blog?.data?.slice(
    (currentPage - 1) * itemsPerPage,
    currentPage * itemsPerPage,
  );

  return (
    <section className="Blog">
      {" "}
      <Breadcrumb_comp breadcrumbs={breadcrumbs} />
      <div className="container">
        <div className="blog_card_holder">
          <div className="row">
            {paginatedData && paginatedData.length > 0 ? (
              paginatedData.map((blog, index) => (
                <div
                  className="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-4"
                  key={index}
                >
                  <Blog_card baseLink={`/blog/${blog.id}`} blogData={blog} />
                </div>
              ))
            ) : (
              <div className="no_product_available_holder">
                <h3>No blogs available yet</h3>
              </div>
            )}
          </div>

          {/* Pagination UI */}
          <div className="pagination pagination_holder mt-4 d-flex justify-content-center align-items-center gap-2">
            <button
              onClick={() => handlePageChange(1)}
              disabled={currentPage === 1}
            >
              &laquo;
            </button>
            <button
              onClick={() => handlePageChange(currentPage - 1)}
              disabled={currentPage === 1}
            >
              &lsaquo;
            </button>

            {/* Always show first two pages */}
            {[currentPage].map((page) => (
              <button
                key={page}
                onClick={() => handlePageChange(page)}
                className={page === currentPage ? "active" : ""}
              >
                {page}
              </button>
            ))}

            {/* Show ... if there are more than 3 pages */}
            {totalPages > 3 && (
              <>
                <span>...</span>

                {/* Show last page */}
                <button
                  onClick={() => handlePageChange(totalPages)}
                  className={currentPage === totalPages ? "active" : ""}
                >
                  {totalPages}
                </button>
              </>
            )}

            <button
              onClick={() => handlePageChange(currentPage + 1)}
              disabled={currentPage === totalPages}
            >
              &rsaquo;
            </button>
            <button
              onClick={() => handlePageChange(totalPages)}
              disabled={currentPage === totalPages}
            >
              &raquo;
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}

export default Blog;
