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

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

  const startIndex = (page - 1) * itemsPerPage;
  const endIndex = startIndex + itemsPerPage;
  const currentBlogs = caseStudyData.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">
        <div className="container mx-auto px-4">
          <h1 className="text-4xl font-bold text-center">Case Study</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">
                Case Study
              </p>
            </Breadcrumbs>
          </div>
        </div>
      </section>
      <section className="py-6 lg:py-12">
        <div className="container mx-auto px-4">
          <div className="flex flex-wrap">
            {
              currentBlogs.map((el, i) => {
                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={el.link}>
                          <Image
                            className="rounded-t-2xl transition-all duration-300 group-hover:scale-105"
                            src={el.img}
                            alt="case study"
                            width={1000}
                            height={1000}
                          />
                        </Link>
                        <Link href={el.link}>
                          <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-[10px_25px_25px] flex justify-center flex-col gap-y-2">
                        <div className="mb-3">
                          <div>
                            <p className="text-[35px] font-semibold font-kanit">{el.percentage}</p>
                          </div>
                          <Link href={el.link}>
                            <h2 className="text-[20px] md:text-[20px] font-medium hover:text-[#c4262e] transition-all duration-300 leading-tight line-clamp-2 mb-3">
                              {el.title}
                            </h2>
                          </Link>
                          <p className="text-[17px] line-clamp-2">
                            {el.shortDescription}
                          </p>
                        </div>
                        <div>
                          {
                            el.topic && el.topic.length > 0 && (
                              <>
                                <p className="text-gray-500 text-[14px] font-semibold uppercase mb-2">
                                  Topics :
                                </p>

                                <div className="flex flex-wrap items-center gap-x-1">
                                  {el.topic.map((top, i) => (
                                    <span
                                      key={i}
                                      className="border border-gray-300 bg-[#c4262e] text-white rounded-full px-4 pt-2 pb-3 font-semibold text-sm"
                                    >
                                      {top}
                                    </span>
                                  ))}
                                </div>
                              </>
                            )
                          }
                        </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 CaseStudy;