"use client";
import React from "react";
import SectionTitle from "@/components/common/SectionTitle";
import Slider from "react-slick";

const BrandSection = () => {
    const settings = {
        dots: false,
        arrows: false,
        infinite: true,
        slidesToShow: 4,
        slidesToScroll: 4,
        autoplay: true,
        speed: 1000,
        autoplaySpeed: 3000,
        cssEase: "ease",
        pauseOnHover: true,
        draggable: true,
        responsive: [
            {
                breakpoint: 1024,
                settings: {
                    slidesToShow: 4,
                }
            },
            {
                breakpoint: 768,
                settings: {
                    slidesToShow: 3,
                }
            },
            {
                breakpoint: 480,
                settings: {
                    slidesToShow: 2,
                }
            },
            {
                breakpoint: 400,
                settings: {
                    slidesToShow: 1,
                }
            }
        ]
    };

    return (
        <section className="brand-section section-space-bottom p-relative">
            {/* <div className="brand-section__shape-one">
                <img src="/assets/images/about/5/element.webp" alt="shape" />
            </div> */}
            <div className="container">
                <SectionTitle
                    tagline="OUR PARTNERS"
                    title="Trusted by <span class='inner-text'>Leaders</span> Worldwide"
                    centered={true}
                    className="mb-30"
                />
                <div className="small-container">
                    <Slider {...settings} className="brand-active">
                        {[1, 2, 3, 4, 1, 2, 3, 4].map((num, i) => (
                            <div key={i} className="brand-item">
                                <span><img src={`/assets/img/add/icon-${num}.webp`} alt="" /></span>
                            </div>
                        ))}
                    </Slider>
                </div>
            </div>
        </section>
    );
};

export default BrandSection;