"use client";

import type React from "react";
import { cn } from "@/lib/utils";
import { useState, useRef, useEffect } from "react";
import { ChevronLeft, ChevronRight } from "lucide-react";

const config = {
  title: "Our team of experts are here to help",
  subtitle:
    "Get support 24/7, with our award-winning support network of growth experts.",
  teamMembers: [
    {
      id: 1,
      name: "Kadir Miye",
      role: "Chief Executive Officer",
      image:
        "https://img.freepik.com/free-psd/3d-rendering-avatar_23-2150833554.jpg?ga=GA1.1.1818589012.1736774497&semt=ais_hybrid",
    },
    {
      id: 2,
      name: "Isabella Thompson",
      role: "Chief Technology Officer",
      image:
        "https://img.freepik.com/premium-photo/png-headset-headphones-portrait-cartoon_53876-762197.jpg?ga=GA1.1.1818589012.1736774497&semt=ais_hybrid",
    },
    {
      id: 3,
      name: "Zainab Rahman",
      role: "Chief Operations Officer",
      image:
        "https://img.freepik.com/premium-photo/png-cartoon-portrait-glasses-white-background_53876-905385.jpg?ga=GA1.1.1818589012.1736774497&semt=ais_hybrid",
    },
    {
      id: 4,
      name: "Aiden Davis",
      role: "Chief Marketing Officer",
      image:
        "https://img.freepik.com/premium-psd/3d-avatar-character_975163-690.jpg?ga=GA1.1.1818589012.1736774497&semt=ais_hybrid",
    },
    {
      id: 5,
      name: "Aysha Hussain",
      role: "UX Designer",
      image:
        "https://img.freepik.com/free-photo/fun-3d-illustration-american-referee_183364-81231.jpg?ga=GA1.1.1818589012.1736774497&semt=ais_hybrid",
    },
    {
      id: 6,
      name: "Samira Shah",
      role: "Product Manager",
      image:
        "https://img.freepik.com/premium-psd/lego-character-with-blue-button-his-chest_1217673-223400.jpg?ga=GA1.1.1818589012.1736774497&semt=ais_hybrid",
    },
    {
      id: 7,
      name: "Ethan Williams",
      role: "Backend Developer",
      image:
        "https://img.freepik.com/premium-photo/there-is-black-girl-with-headphones-yellow-jacket_1034474-106535.jpg?ga=GA1.1.1818589012.1736774497&semt=ais_hybrid",
    },
    {
      id: 8,
      name: "Amina Khan",
      role: "Frontend Developer",
      image:
        "https://img.freepik.com/free-photo/portrait-young-student-with-book-education-day_23-2150980030.jpg?ga=GA1.1.1818589012.1736774497&semt=ais_hybrid",
    },
  ],
  accentColor: "#4f46e5",
  secondaryColor: "#6b7280",
};

const TeamOne = () => {
  const scrollContainerRef = useRef<HTMLDivElement>(null);
  const [canScrollLeft, setCanScrollLeft] = useState(false);
  const [canScrollRight, setCanScrollRight] = useState(true);

  const checkScrollButtons = () => {
    if (scrollContainerRef.current) {
      const { scrollLeft, scrollWidth, clientWidth } =
        scrollContainerRef.current;
      setCanScrollLeft(scrollLeft > 0);
      setCanScrollRight(scrollLeft < scrollWidth - clientWidth - 10);
    }
  };

  useEffect(() => {
    checkScrollButtons();
    window.addEventListener("resize", checkScrollButtons);
    return () => window.removeEventListener("resize", checkScrollButtons);
  }, []);

  const scroll = (direction: "left" | "right") => {
    if (scrollContainerRef.current) {
      const { clientWidth } = scrollContainerRef.current;
      const scrollAmount = clientWidth * 0.8;
      scrollContainerRef.current.scrollBy({
        left: direction === "left" ? -scrollAmount : scrollAmount,
        behavior: "smooth",
      });
    }
  };

  return (
    <section className={cn("w-full")}>
      <div className="container mx-auto max-w-6xl px-4">
        <div className="rounded-2xl p-8 shadow-sm md:p-12">
          <div className="mb-8 text-center">
            <h2 className="mb-4 text-3xl font-semibold md:text-4xl">
              {config.title}
            </h2>
            <p
              className="mx-auto max-w-2xl text-base"
              style={{ color: config.secondaryColor }}
            >
              {config.subtitle}
            </p>
          </div>

          <div className="relative mt-12">
            {canScrollLeft && (
              <button
                onClick={() => scroll("left")}
                className="bg-primary absolute top-1/2 left-0 z-10 -translate-y-1/2 rounded-full p-2 shadow-md"
                aria-label="Scroll left"
              >
                <ChevronLeft size={20} />
              </button>
            )}

            <div
              ref={scrollContainerRef}
              className="hide-scrollbar flex gap-4 overflow-x-auto pb-4"
              onScroll={checkScrollButtons}
            >
              {config.teamMembers.map((member) => (
                <div
                  key={member.id}
                  className="bg-card/90 w-64 flex-shrink-0 overflow-hidden rounded-lg border border-white/10 opacity-100 shadow-sm transition-opacity hover:opacity-75 hover:shadow-md"
                >
                  <div className="relative aspect-[4/3] overflow-hidden">
                    <img
                      src={member.image || "/placeholder.svg"}
                      alt={member.name}
                      className="object-cover"
                    />
                  </div>
                  <div className="p-4">
                    <h3 className="font-medium">{member.name}</h3>
                    <p
                      className="text-sm"
                      style={{ color: config.secondaryColor }}
                    >
                      {member.role}
                    </p>
                  </div>
                </div>
              ))}
            </div>

            {canScrollRight && (
              <button
                onClick={() => scroll("right")}
                className="bg-primary absolute top-1/2 right-0 z-10 -translate-y-1/2 rounded-full p-2 shadow-md"
                aria-label="Scroll right"
              >
                <ChevronRight size={20} />
              </button>
            )}
          </div>
        </div>
      </div>
    </section>
  );
};

export default TeamOne;