import React, { useEffect, useState } from 'react'
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import Link from 'next/link'
import Attorneys from '../../api/attorneys'
import Image from 'next/image';
import { useTranslations } from 'next-intl';
import { useRouter } from 'next/router';
import axios from 'axios';


const settings = {
    dots: false,
    arrows: true,
    speed: 1000,
    slidesToShow: 4,
    slidesToScroll: 1,
    autoplay: true,
    responsive: [
        {
            breakpoint: 1600,
            settings: {
                slidesToShow: 4,
                slidesToScroll: 1,
            }
        },
        {
            breakpoint: 1500,
            settings: {
                slidesToShow: 3,
                slidesToScroll: 1,
            }
        },
        {
            breakpoint: 1200,
            settings: {
                slidesToShow: 3,
                slidesToScroll: 1
            }
        },
        {
            breakpoint: 1100,
            settings: {
                slidesToShow: 2,
                slidesToScroll: 1
            }
        },
        {
            breakpoint: 767,
            settings: {
                slidesToShow: 2,
                slidesToScroll: 1
            }
        },
        {
            breakpoint: 575,
            settings: {
                slidesToShow: 1,
                slidesToScroll: 1
            }
        }
    ]
};


const Attorney = (props) => {
    const t = useTranslations("Clinets");
    const { locale } = useRouter();
    const [clients, setClients] = useState([]);

    useEffect(() => {
        axios.get('https://dokan-backend.d-menus.com/client').then((res) => {
            setClients(res.data.allClients);
            console.log(res.data.allClients);
        })
    }, []);
    const ClickHandler = () => {
        window.scrollTo(10, 0);
    }

    return (
        <section className="wpo-team-section section-padding pt-0">
            <div className="container">
                <div className="wpo-team-wrap">
                    <div style={{ direction: "ltr" }} className="row align-items-center">
                        <div style={{ marginTop: "2rem", textAlign: `${locale === "ar" ? "center" : ""}` }} className="col-lg-5">
                            <div className="wpo-section-title">
                                <span style={locale === "ar" ? { fontSize: "2.2rem" } : {}}>{t("client_title")}</span>
                                <h2>{t("most_important")}</h2>
                            </div>
                        </div>
                    </div>
                    <div className="wpo-team-active">
                        <Slider {...settings}>
                            {
                                clients.length !== 0 && clients.map((attorney, aitem) => (
                                    <div className="wpo-team-item" key={attorney.id}>
                                        <div className="wpo-team-img">
                                            <img src={attorney.image} alt="" width={100} height={100} />
                                        </div>
                                        <div className="wpo-team-text">
                                            {/* <h2><Link onClick={ClickHandler} href={'/attorneys-single/slug'} as={`/attorneys-single/${attorney.slug}`}>{attorney.name}</Link></h2>
                                            <span>{attorney.title}</span> */}
                                            {/* <div className="social">
                                            <ul>
                                                <li><Link href="/"><i className="ti-facebook"></i></Link></li>
                                                <li><Link href="/"><i className="ti-twitter-alt"></i></Link></li>
                                                <li><Link href="/"><i className="ti-instagram"></i></Link></li>
                                            </ul>
                                        </div> */}
                                        </div>
                                    </div>
                                ))
                            }
                            {clients.length === 0 && Attorneys.map((attorney, aitem) => (
                                <div className="wpo-team-item" key={aitem}>
                                    <div className="wpo-team-img">
                                        <img src={attorney.AtImg} alt="" />
                                    </div>
                                    <div className="wpo-team-text">
                                        <h2><Link onClick={ClickHandler} href={'/attorneys-single/slug'} as={`/attorneys-single/${attorney.slug}`}>{attorney.name}</Link></h2>
                                        <span>{attorney.title}</span>
                                        {/* <div className="social">
                                            <ul>
                                                <li><Link href="/"><i className="ti-facebook"></i></Link></li>
                                                <li><Link href="/"><i className="ti-twitter-alt"></i></Link></li>
                                                <li><Link href="/"><i className="ti-instagram"></i></Link></li>
                                            </ul>
                                        </div> */}
                                    </div>
                                </div>
                            ))}
                        </Slider>
                    </div>
                    {/* <div className={`visible-text s2 ${props.vClass}`}>
                        <h2>Attorneys</h2>
                    </div> */}
                </div>
            </div>
        </section>
    )
}

export default Attorney;
