"use client";
import { Swiper, SwiperSlide } from 'swiper/react';
import { Navigation, Pagination, Autoplay } from "swiper/modules";

import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";

import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/dialog';

import { useTranslation } from 'react-i18next';
import video from '@/assets/used-icons/video.png';

const LeadershipClients = () => {
  const { t } = useTranslation();
  const clientsData = [
    { image: 'https://ivorytraining.com/li/assets/img/clients/client-7.png', name: 'Client 1' },
    { image: 'https://ivorytraining.com/li/assets/img/clients/client-8.png', name: 'Client 2' },
    { image: 'https://ivorytraining.com/li/assets/img/clients/client-4.png', name: 'Client 3' },
  ];
  return (
    <section className="w-full py-5 bg-white text-center ">
      <div className="grid place-items-center mb-4">
        <h2 className="services-header grid place-items-center after:w-36 after:-bottom-2">
          عملاء حصلو على البرنامج
        </h2>
      </div>
      <div className="logo-slider-container">
        <div className="two-clients border-2 rounded-lg flex items-center">
          <Dialog>
            <DialogTrigger className='w-24 px-2'>
              <img src={video} alt="Play Video" className="" />
            </DialogTrigger>
            <DialogContent>
              <iframe
                width="100%"
                height="200"
                src="https://www.youtube.com/embed/BQNPuf4Z7VY"
                title="YouTube video"
                frameBorder="0"
                allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                allowFullScreen
                className='w-full h-full'
              ></iframe>
            </DialogContent>

          </Dialog>

          {clientsData.length === 0 ? (
            <div className="text-center py-8">
              <p>{t('custom.noClients')}</p>
            </div>
          ) : (
            <Swiper
              modules={[Navigation, Pagination, Autoplay]}
              spaceBetween={20}
              slidesPerView={3}
              loop={true}
              autoplay={{ delay: 3000, disableOnInteraction: false }}
              breakpoints={{
                300: { slidesPerView: 1, spaceBetween: 10 },
                480: { slidesPerView: 2, spaceBetween: 15 },
                768: { slidesPerView: 3, spaceBetween: 20 },
                1024: { slidesPerView: 3, spaceBetween: 30 },
              }}
              className='!h-40'
            >
              {clientsData.map((client, i) => (
                <SwiperSlide key={i} className='w-full h-36'>
                  <div className="relative flex justify-center items-center w-8/12 h-full">
                    <img
                      src={client.image}
                      alt={client.name}
                      className="w-3/4 h-28 object-contain"
                    />
                  </div>
                </SwiperSlide>
              ))}
            </Swiper>
          )}
        </div>
      </div>
    </section>
  );
};

export default LeadershipClients;