import React 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 ServicesList from '../../api/services'
import Image from 'next/image';
import { useTranslations } from 'next-intl';
import { useRouter } from 'next/router';


const settings = {
    dots: false,
    arrows: true,
    speed: 1000,
    slidesToShow: 5,
    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 Services = (props) => {
    const t = useTranslations("SerVices");
    const { locale } = useRouter();
    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("service_title")}</span>
                                <h2>{t("service_subTitle")}</h2>
                            </div>
                        </div>
                    </div>
                    <div className="wpo-team-active">
                        <Slider {...settings}>
                            {ServicesList.map((attorney, aitem) => (
                                <Link onClick={ClickHandler} href={`/services/service-details/${attorney.id}`}>
                                    <div className="wpo-team-item" key={aitem}>
                                        <div className="wpo-team-img">
                                            <Image src={attorney.AtImg} alt="" />
                                        </div>
                                        <div className="wpo-team-text">
                                            <h2 style={{ fontSize: "2.5rem" }}><Link onClick={ClickHandler} href={`/services/service-details/${attorney.id}`}>{t(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 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>
                                </Link>
                            ))}
                        </Slider>
                    </div>
                    {/* <div className={`visible-text s2 ${props.vClass}`}>
                        <h2>Attorneys</h2>
                    </div> */}
                </div>
            </div>
        </section>
    )
}

export default Services;
