import React, { useRef } from "react";
import top from "../../assets/images/top-buyer-1png.png";
import top2 from "../../assets/images/top-buyer-2.png";
import top3 from "../../assets/images/top-buyer-3.png";
import top4 from "../../assets/images/top-buyer-4.png";
import Icons from "../Helpers/Icons";
import SliderCom from "../Helpers/SliderCom";

export default function RecomendedSliders({ className }) {
    const settings = {
        arrows: false,
        dots: false,
        infinite: true,
        autoplay: true,
        slidesToShow: 4,
        slidesToScroll: 1,
        responsive: [
            {
                breakpoint: 426,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 1,
                },
            },
        ],
    };
    const sellSlider = useRef(null);
    const buySlider = useRef(null);
    const prevHandler = (value) => {
        if (value === "sell") {
            sellSlider.current.slickPrev();
        }
        if (value === "buy") {
            buySlider.current.slickPrev();
        }
    };
    const nextHandler = (value) => {
        if (value === "sell") {
            sellSlider.current.slickNext();
        }
        if (value === "buy") {
            buySlider.current.slickNext();
        }
    };
    return (
        <>
            {/*<div className="heading flex justify-between items-center mb-4">*/}
            {/*    <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">*/}
            {/*        Top Seller*/}
            {/*    </h1>*/}
            {/*    <div className="slider-btns flex space-x-4">*/}
            {/*        <button*/}
            {/*            onClick={() => nextHandler("sell")}*/}
            {/*            type="button"*/}
            {/*            className="transform rotate-180 text-dark-gray dark:text-white dark:opacity-25"*/}
            {/*        >*/}
            {/*            <Icons name="arrows" />*/}
            {/*        </button>*/}
            {/*        <button*/}
            {/*            onClick={() => prevHandler("sell")}*/}
            {/*            type="button"*/}
            {/*            className="transform rotate-180"*/}
            {/*        >*/}
            {/*            <div className="  text-dark-gray dark:text-white">*/}
            {/*                <svg*/}
            {/*                    width="11"*/}
            {/*                    height="19"*/}
            {/*                    viewBox="0 0 11 19"*/}
            {/*                    fill="none"*/}
            {/*                    xmlns="http://www.w3.org/2000/svg"*/}
            {/*                >*/}
            {/*                    <path*/}
            {/*                        d="M9.09766 1.1499L1.13307 9.11449L9.09766 17.0791"*/}
            {/*                        stroke="url(#paint0_linear_220_23410)"*/}
            {/*                        strokeWidth="2"*/}
            {/*                        strokeLinecap="round"*/}
            {/*                        strokeLinejoin="round"*/}
            {/*                    />*/}
            {/*                    <defs>*/}
            {/*                        <linearGradient*/}
            {/*                            id="paint0_linear_220_23410"*/}
            {/*                            x1="9.09766"*/}
            {/*                            y1="1.1499"*/}
            {/*                            x2="-4.2474"*/}
            {/*                            y2="7.96749"*/}
            {/*                            gradientUnits="userSpaceOnUse"*/}
            {/*                        >*/}
            {/*                            <stop stopColor="#F539F8" />*/}
            {/*                            <stop offset="0.416763" stopColor="#C342F9" />*/}
            {/*                            <stop offset="1" stopColor="#5356FB" />*/}
            {/*                        </linearGradient>*/}
            {/*                    </defs>*/}
            {/*                </svg>*/}
            {/*            </div>*/}
            {/*        </button>*/}
            {/*    </div>*/}
            {/*</div>*/}
            <div className="slider-content">
                <SliderCom settings={settings} selector={sellSlider}>
                    <div className="item commonHeaderSliderItem">
                        {/* title */}
                        <div className="flex justify-center">
                            <p className="text-base font-bold   text-dark-gray dark:text-white">
                               This is short title
                            </p>
                        </div>
                        {/* username */}
                        <div className="flex justify-center mb-1">
                            <p className="text-xs text-thin-light-gray">
                               Some wondersull text here and more
                            </p>
                        </div>
                        {/* items */}
                        <div className="flex justify-center">
                            <div className="flex space-x-1 items-center text-purple text-xs">
                                <span>(button)</span>
                            </div>
                        </div>
                    </div>

                    <div className="item commonHeaderSliderItem">
                        {/* title */}
                        <div className="flex justify-center">
                            <p className="text-base font-bold   text-dark-gray dark:text-white">
                                This is short title
                            </p>
                        </div>
                        {/* username */}
                        <div className="flex justify-center mb-1">
                            <p className="text-xs text-thin-light-gray">
                                Some wondersull text here and more
                            </p>
                        </div>
                        {/* items */}
                        <div className="flex justify-center">
                            <div className="flex space-x-1 items-center text-purple text-xs">
                                <span>(button)</span>
                            </div>
                        </div>
                    </div>


                    <div className="item commonHeaderSliderItem">
                        {/* title */}
                        <div className="flex justify-center">
                            <p className="text-base font-bold   text-dark-gray dark:text-white">
                                This is short title
                            </p>
                        </div>
                        {/* username */}
                        <div className="flex justify-center mb-1">
                            <p className="text-xs text-thin-light-gray">
                                Some wondersull text here and more
                            </p>
                        </div>
                        {/* items */}
                        <div className="flex justify-center">
                            <div className="flex space-x-1 items-center text-purple text-xs">
                                <span>(button)</span>
                            </div>
                        </div>
                    </div>


                    <div className="item commonHeaderSliderItem">
                        {/* title */}
                        <div className="flex justify-center">
                            <p className="text-base font-bold   text-dark-gray dark:text-white">
                                This is short title
                            </p>
                        </div>
                        {/* username */}
                        <div className="flex justify-center mb-1">
                            <p className="text-xs text-thin-light-gray">
                                Some wondersull text here and more
                            </p>
                        </div>
                        {/* items */}
                        <div className="flex justify-center">
                            <div className="flex space-x-1 items-center text-purple text-xs">
                                <span>(button)</span>
                            </div>
                        </div>
                    </div>


                    <div className="item commonHeaderSliderItem">
                        {/* title */}
                        <div className="flex justify-center">
                            <p className="text-base font-bold   text-dark-gray dark:text-white">
                                This is short title
                            </p>
                        </div>
                        {/* username */}
                        <div className="flex justify-center mb-1">
                            <p className="text-xs text-thin-light-gray">
                                Some wondersull text here and more
                            </p>
                        </div>
                        {/* items */}
                        <div className="flex justify-center">
                            <div className="flex space-x-1 items-center text-purple text-xs">
                                <span>(button)</span>
                            </div>
                        </div>
                    </div>

                    <div className="item commonHeaderSliderItem">
                        {/* title */}
                        <div className="flex justify-center">
                            <p className="text-base font-bold   text-dark-gray dark:text-white">
                                This is short title
                            </p>
                        </div>
                        {/* username */}
                        <div className="flex justify-center mb-1">
                            <p className="text-xs text-thin-light-gray">
                                Some wondersull text here and more
                            </p>
                        </div>
                        {/* items */}
                        <div className="flex justify-center">
                            <div className="flex space-x-1 items-center text-purple text-xs">
                                <span>(button)</span>
                            </div>
                        </div>
                    </div>

                    <div className="item commonHeaderSliderItem">
                        {/* title */}
                        <div className="flex justify-center">
                            <p className="text-base font-bold   text-dark-gray dark:text-white">
                                This is short title
                            </p>
                        </div>
                        {/* username */}
                        <div className="flex justify-center mb-1">
                            <p className="text-xs text-thin-light-gray">
                                Some wondersull text here and more
                            </p>
                        </div>
                        {/* items */}
                        <div className="flex justify-center">
                            <div className="flex space-x-1 items-center text-purple text-xs">
                                <span>(button)</span>
                            </div>
                        </div>
                    </div>

                </SliderCom>
            </div>
        </>
    );
}