import {
  Carousel,
  CarouselContent,
  CarouselItem,
} from '@/components/ui/carousel';
import Autoplay from 'embla-carousel-autoplay';
import { motion } from 'framer-motion';
import { trustedBy } from '@/assets/images/trusted-by';

export default function TrustedBy() {
  return (
    <section className="flex flex-col space-y-6 py-12 lg:py-20">
      <motion.h3
        variants={{
          visible: { opacity: 1, y: 0 },
          hidden: { opacity: 0, y: -30 },
        }}
        initial="hidden"
        whileInView="visible"
        viewport={{ once: true }}
        transition={{ duration: 0.7, ease: 'easeInOut' }}
        className="px-[1.5rem] lg:px-[3.25rem] xl:px-[6.25rem] text-center text-secondary font-semibold "
      >
        Our Partners
      </motion.h3>
      <motion.div
        variants={{
          visible: { opacity: 1, y: 0 },
          hidden: { opacity: 0, y: -30 },
        }}
        initial="hidden"
        whileInView="visible"
        viewport={{ once: true }}
        transition={{ duration: 0.7, ease: 'easeInOut', delay: 0.2 }}
      >
        <Carousel
          opts={{
            loop: true,
            dragFree: true,
          }}
          plugins={[
            Autoplay({
              delay: 2500,
            }),
          ]}
        >
          <CarouselContent className="justify-center items-center xl:px-[6.25rem]">
            {trustedBy.map((company, index) => {
              return (
                <CarouselItem
                  key={index}
                  className="flex items-center justify-center basis-1/5 xl:basis-1/5 pr-2 "
                >
                  <div>
                    <img
                    draggable="false"
                      src={company}
                      alt="company"
                      className="max-h-[130px]"
                    />
                  </div>
                </CarouselItem>
              );
            })}
          </CarouselContent>
        </Carousel>
      </motion.div>
    </section>
  );
}