Untitled

"use client";


import React, { useState, useEffect } from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import Image from "next/image";
import { Pagination } from "swiper/modules";
import FallbackImage from "./FallbackImage";
import Skeleton from "react-loading-skeleton";
import "react-loading-skeleton/dist/skeleton.css";
import { usePathname } from "next/navigation";

export default function Agents() {
  const [agents, setAgents] = useState([]);
  const [loading, setLoading] = useState(true);
  const [header, setHeader] = useState("");
  const [error, setError] = useState(null);


  const pathname = usePathname();
  const isFrench = pathname.includes("/fr");

  useEffect(() => {
    const fetchAgents = async () => {
      try {
        setLoading(true);

        const [teamRes, settingsRes] = await Promise.all([
          fetch("/api/team"),
          fetch(`/api/settings`),
        ]);

        const [teamData, settingsData] = await Promise.all([
          teamRes.json(),
          settingsRes.json(),
        ]);

        // Team data handling
        if (teamData.success) {
          const transformedAgents = teamData.data.map((agent, index) => ({
            id: agent.id,
            name: agent.name,
            position: agent.designation,
            imgSrc: agent.profile_pic,
            wowDelay: `${(index + 1) * 0.1}s`,
            wowDelay: `${(index + 1) * 0.1}s`,
          }));
          setAgents(transformedAgents);
        } else {
          setError("Failed to fetch agents");
        }

        // Settings / about data handling
        if (settingsData.success) {
          const localizedHeader = isFrench
            ? settingsData.data.fr_agent_header
            : settingsData.data.agent_header;
          setHeader(
            localizedHeader || (isFrench ? "Nos équipes" : "Our Teams")
          );


        }
      } catch (err) {
        setError("Error fetching agents or settings: " + err.message);
        setError("Error fetching agents or settings: " + err.message);
      } finally {
        setLoading(false);




      }
    };

    fetchAgents();
  }, [pathname]);

  // Loading Skeleton
  // Loading Skeleton
  if (loading) {
    return (
      <section className="flat-section flat-agents our-teams-sec">
        <div className="container">
          <div className="row">
            {[...Array(4)].map((_, i) => (
              <div className="col-md-3" key={i}>
                <Skeleton
                  height={30}
                  width={200}
                  style={{ margin: "20px auto" }}
                />
                <Skeleton
                  height={20}
                  count={3}
                  width={300}
                  style={{ margin: "10px auto" }}
                />
              </div>
            ))}
          </div>
        </div>
      </section>
    );
  }

  // Error Handling
  // Error Handling
  if (error) {
    return (
      <section className="flat-section flat-agents our-teams-sec">
        <div className="container">
          <div className="text-center text-danger">{error}</div>
        </div>
      </section>
    );
  }

  return (
    <section className="flat-section flat-agents our-teams-sec" id="our-agents">
      <div className="container">
        <div className="box-title text-center wow fadeInUp">
          <div className="text-subtitle text-primary">
            {isFrench ? "Nos équipes" : "Our Teams"}
          </div>
          <h3 className="title mt-4">{header}</h3>







        </div>











        {/* Desktop/Tablet View */}
        <Swiper
          spaceBetween={30}
          slidesPerView={1}
          className="swiper tf-sw-desktop-1"
          modules={[Pagination]}
          pagination={{ clickable: true, el: ".spb3" }}
          breakpoints={{
            576: { slidesPerView: 2 },
            768: { slidesPerView: 3 },
            1024: { slidesPerView: 4 },
            576: { slidesPerView: 2 },
            768: { slidesPerView: 3 },
            1024: { slidesPerView: 4 },
          }}
        >
          {agents.map((agent) => (
            <SwiperSlide key={agent.id}>
              <div
                className="box-agent hover-img wow fadeInUp"
                style={{ animationDelay: agent.wowDelay }}
              >
                <a
                  href=""
                  onClick={(e) => e.preventDefault()}
                  className="box-img img-style"
                >
                  <FallbackImage
                    src={agent.imgSrc}
                    alt={agent.name || "Profile Image"}
                    width={840}
                    height={473}
                    className="lazyload"
                  />
                </a>
                <div className="content">
                  <div className="info">
                    <h5>
                      <a
                        className="link"
                        href=""
                        onClick={(e) => e.preventDefault()}
                      >
                        {agent.name}
                      </a>
                    </h5>
                    <p className="text-variant-1">{agent.position}</p>
                  </div>
                </div>
              </div>
            </SwiperSlide>
          ))}
          <div className="sw-pagination spb3 sw-pagination-mb-1 text-center d-block" />
        </Swiper>
          </div>
    </section>
  );
}