import React from "react";
import Link from "next/link";
import Image from "next/image";
import { useRouter } from "next/router";
import { Swiper, SwiperSlide } from "swiper/react";
import { Pagination, Autoplay } from "swiper/modules";
import { Container } from "react-bootstrap";

const PageBanner = ({ banners = [] }) => {
  const router = useRouter();

  // Function to generate breadcrumbs for client servicing pages
  const generateClientServicingBreadcrumbs = () => {
    const pathname = router.asPath;
    
    // Only apply custom breadcrumbing for client-servicing pages
    if (!pathname.includes('/client-servicing')) {
      return null;
    }

    const pathSegments = pathname.split('/').filter(segment => segment);
    const breadcrumbs = [];

    // Create breadcrumb mapping for better display names
    const segmentNameMap = {
      'client-servicing': 'Client Servicing',
      // Virtual Finance Office section
      'virtual-finance-office': 'Virtual Finance Office',
      'virtual-cfo': 'Virtual CFO Services',
      'virtual-fc': 'Virtual FC Services',
      'book-closures-audit': 'Book Closures and Audit Support',
      'apc': 'Accounting Payroll & Compliance',
      // Advisory Services section
      'advisory-services': 'Advisory Services',
      'transaction-advisory': 'Transaction Advisory',
      'risk-advisory': 'Risk Advisory',
      'business-advisory': 'Business Advisory',
      // GCC as a Service
      'gcc-as-a-service': 'GCC as a Service',
      // Digital Transformation
      'digital-transformation': 'Digital Transformation',
      // Empowering Finance Consultants
      'empowering-finance-consultants': 'Empowering Finance Consultants',
      // Bespoke Services
      'bespoke-services': 'Bespoke Services',
      // Legacy mappings for existing pages
      'cfo': 'CFO',
      'ba': 'BA',
      'ta': 'TA',
      'ra': 'RA'
    };

    // Build breadcrumbs from path segments
    let currentPath = '';
    pathSegments.forEach((segment, index) => {
      currentPath += `/${segment}`;
      const displayName = segmentNameMap[segment] || segment.replace(/-/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
      
      breadcrumbs.push({
        name: displayName,
        url: currentPath,
        isLast: index === pathSegments.length - 1
      });
    });

    return breadcrumbs;
  };

  const clientServicingBreadcrumbs = generateClientServicingBreadcrumbs();
  return (
    <Swiper
      spaceBetween={30}
      pagination={{
        clickable: true,
      }}
      breakpoints={{
        0: {
          slidesPerView: 1,
        },
        768: {
          slidesPerView: 1,
        },
        1200: {
          slidesPerView: 1,
        },
      }}
      autoplay={{
        delay: 5000,
        disableOnInteraction: true,
        pauseOnMouseEnter: true,
      }}
      modules={[Autoplay]}
      className="page-banner-swiper"
    >
      {banners.map((banner, index) => (
        <SwiperSlide key={index}>
          <div className="page-title-area">
            <div className="image-wrapper">
              <Image
                src={banner.imageSrc}
                alt={banner.pageTitle}
                fill
                style={{ objectFit: "fill" }} // Replace objectFit prop
                priority
                className="img-fluid postion-absolute"
              />
            </div>
            <Container>
              <div className="page-title-content">
                <h2>{banner.pageTitle}</h2>
                <ul>
                  {clientServicingBreadcrumbs ? (
                    // Custom breadcrumbs for client servicing pages
                    clientServicingBreadcrumbs.map((breadcrumb, breadcrumbIndex) => (
                      <li key={breadcrumbIndex}>
                        {breadcrumb.isLast ? (
                          breadcrumb.name
                        ) : (
                          <Link href={breadcrumb.url}>{breadcrumb.name}</Link>
                        )}
                      </li>
                    ))
                  ) : (
                    // Default breadcrumbs for other pages
                    <>
                      <li>
                        <Link href={banner.homePageUrl}>{banner.homePageText}</Link>
                      </li>
                      <li>{banner.activePageText}</li>
                    </>
                  )}
                </ul>
              </div>
            </Container>
          </div>
        </SwiperSlide>
      ))}
    </Swiper>
  );
};

export default PageBanner;