import React, { useEffect, useState } from 'react';
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 Clients = (props) => {
    const t = useTranslations("Clinets");
    const { locale } = useRouter();
    const [clients, setClients] = useState([]);
    const ClickHandler = () => {
        window.scrollTo(10, 0);
    }
    useEffect(() => {
        axios.get('https://dokan-backend.d-menus.com/client').then((res) => {
            setClients(res.data.allClients);
            console.log(res.data.allClients);
        })
    }, []);
    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">
                        <div className="row">
                            {
                                clients.length > 0 && clients.map((attorney, aitem) => (
                                    <div className='col-md-3'>
                                        <div className="wpo-team-item" key={attorney.id}>
                                            <div className="wpo-team-img">
                                                <img width={100} height={100} src={attorney.image} 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>
                                        </div>
                                    </div>
                                ))
                            }
                            {clients.length === 0 && Attorneys.map((attorney, aitem) => (
                                <div className='col-md-3'>
                                    <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>
                                    </div>
                                </div>
                            ))}
                        </div>
                    </div>
                </div>
            </div>
        </section>
    )
}

export default Clients;
