"use client";

import Image from "next/image";
import Link from "next/link";
import React, { useState } from "react";
import PersonOutlineOutlinedIcon from "@mui/icons-material/PersonOutlineOutlined";
import CalendarMonthOutlinedIcon from "@mui/icons-material/CalendarMonthOutlined";
import ArrowOutwardIcon from '@mui/icons-material/ArrowOutward';
import Pagination from "@mui/material/Pagination";
import PaginationItem from "@mui/material/PaginationItem";
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
import { blogsData } from "../data/blogsData";
import { Breadcrumbs } from "@mui/material";

function Blogs() {
  const [page, setPage] = useState(1);
  const itemsPerPage = 9;
  const totalPages = Math.ceil(blogsData.length / itemsPerPage);

  // Calculate the items to display for the current page
  const startIndex = (page - 1) * itemsPerPage;
  const endIndex = startIndex + itemsPerPage;
  const currentBlogs = blogsData.slice(startIndex, endIndex);

  const handlePageChange = (
    event: React.ChangeEvent<unknown>,
    value: number
  ) => {
    setPage(value);
    // Scroll to top when page changes
    window.scrollTo({ top: 0, behavior: "smooth" });
  };

  return (
    <main>
      <section className="pt-20 md:pt-32 pb-10 lg:pb-12 h-full patern">
        <h1 className="text-4xl font-bold text-center">Blogs</h1>
        <div className="flex justify-center mt-5">
          <Breadcrumbs separator="-" aria-label="breadcrumb">
            <Link key="1" color="inherit" href="/">
              Home
            </Link>
            <p key="3" className="text-gray-900">Blogs</p>
          </Breadcrumbs>
        </div>
      </section>
      <section className="py-6 lg:py-12">
        <div className="container mx-auto px-4">
          <div className="flex flex-wrap">
            {currentBlogs.map((blog: any, i: number) => {
              return (
                <div key={i} className="w-full md:w-[50%] lg:w-[33.33%] p-3">
                  <div className="bg-neutral-100 rounded-2xl group h-full hover:shadow-[-5px_5px_8px_0px_#01010138] transition-all duration-300">
                    <div className="overflow-hidden rounded-t-2xl relative">
                      <Link href={blog.url}>
                        <Image
                          className="rounded-t-2xl transition-all duration-300 group-hover:scale-105"
                          src={blog.cardImg}
                          alt={blog.title}
                          width={1000}
                          height={1000}
                        />
                      </Link>
                      <Link href={blog.url}>
                        <div className="absolute bottom-4 right-4 bg-white group-hover:bg-[#c4262e] rounded-full h-10 w-10 flex items-center justify-center">
                          <ArrowOutwardIcon fontSize="small" className="text-[#c4262e] group-hover:text-white transition-all duration-300" />
                        </div>
                      </Link>
                    </div>
                    <div className="p-4 md:p-6 flex justify-center flex-col gap-y-3">
                      <div className="flex items-center gap-x-5">
                        <div className="flex items-center gap-x-2 text-gray-500">
                          <PersonOutlineOutlinedIcon fontSize="small" />
                          <p>{blog.author}</p>
                        </div>
                        <div className="flex items-center gap-x-2 text-gray-500">
                          <CalendarMonthOutlinedIcon fontSize="small" />
                          <p>{blog.date}</p>
                        </div>
                      </div>
                      <div>
                        <Link href={blog.url}>
                          <h2 className="text-[20px] md:text-[25px] font-semibold hover:text-[#c4262e] transition-all duration-300 leading-tight line-clamp-2 mb-3">
                            {blog.title}
                          </h2>
                        </Link>
                        <p className="text-[17px] line-clamp-2">
                          {blog.shortDesc}
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
          {totalPages > 1 && (
            <div className="flex justify-center items-center mt-10">
              <Pagination
                count={totalPages}
                page={page}
                onChange={handlePageChange}
                renderItem={(item) => (
                  <PaginationItem
                    slots={{ previous: ArrowBackIcon, next: ArrowForwardIcon }}
                    {...item}
                  />
                )}
              />
            </div>
          )}
        </div>
      </section>
    </main>
  );
}

export default Blogs;