import React from 'react';
import Link from 'next/link';
import Practices from '../../api/Practices';
import { useTranslations } from 'next-intl';


const Practice3 = (props) => {
    const t = useTranslations("Our_Team");
    const ClickHandler = () => {
        window.scrollTo(10, 0);
    }

    return (

        <section className={`wpo-practice-section-s3 ${props.pClass}`}>
            <div className="container">
                <div className="wpo-section-title-s2">
                    <h2>{t("title")}</h2>
                    <span>{t("description")}</span>
                </div>
                <div className="wpo-practice-wrap">
                    <div className="row">
                        {Practices.map((practice, Pitem) => (
                            <div className="col-lg-4 col-md-6 col-12" key={Pitem}>
                                <div className="wpo-practice-item">
                                    <div className="wpo-practice-icon">
                                        <i className={`fi ${practice.icon}`}></i>
                                    </div>
                                    <div className="wpo-practice-content">
                                        <h2><Link onClick={ClickHandler} href={'/practice/slug'} as={`/practice/${practice.slug}`}>{t(practice.sTitle)}</Link></h2>
                                        <p>{t(practice.description)}</p>
                                        <p>{t(practice.phoneNumber)}</p>
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </section>
    )
}


export default Practice3;