import React from 'react';
import Link from 'next/link';
import { useTranslations } from 'next-intl';
import { useRouter } from 'next/router';


const TheFeesComponent = (props) => {
    const { locale } = useRouter();
    const t = useTranslations("the_fees");
    const ClickHandler = () => {
        window.scrollTo(10, 0);
    }
    const Practices = [
        {
            Id: '1',
            sTitle: 'member1_name',
            description: 'member1_position',
            phoneNumber: 'member1_number',
            slug: 'Family-Law',
            des2: 'The lower-numbered purposes are better understood and practiced',
            des3: 'One way to categorize the activities is in terms of the professional’s area of expertise such as competitive analysis, corporate strategy the activities',
            icon: 'flaticon-013-planning',
        },
    ]
    return (

        <section className={`wpo-practice-section-s3 ${props.pClass}`}>
            <div className="container">
                <div className="wpo-practice-wrap">
                    <div className="row">
                        {Practices.map((practice, Pitem) => (
                            <div className="col-lg-12 col-md-12 col-12" key={Pitem}>
                                <div className="wpo-practice-item">
                                    <div className="wpo-section-title-s2">
                                        <h2>{t("the_fees_name")}</h2>
                                        <span>{t("the_fees_desc")}</span>
                                    </div>
                                    <div style={{ textAlign: `${locale === "ar" ? "right" : "left"}` }} className="wpo-practice-content">
                                        <div className="wpo-testimonial-info-text">
                                            <h2 style={{ color: "#fff" }}>{t("financial_services_fee_name")}</h2>
                                            <ul style={{ fontSize: '1.3rem', color: "#fff" }}>
                                                <li>- {t("financial_services_fee_desc_1")}</li>
                                                <li>- {t("financial_services_fee_desc_2")}</li>
                                                <li>- {t("financial_services_fee_desc_3")}</li>
                                                <li>- {t("financial_services_fee_desc_4")}</li>
                                                <li>- {t("financial_services_fee_desc_5")}</li>
                                            </ul>
                                        </div>
                                        <div className="wpo-testimonial-info-text my-2">
                                            <h2 style={{ color: "#fff" }}>{t("tax_services_fee_name")}</h2>
                                            <ul style={{ fontSize: '1.3rem', color: "#fff", marginRight: `${locale === "ar" ? "2rem" : ""}` }}>
                                                <li>- {t("tax_services_fee_desc_1")}</li>
                                                <li>- {t("tax_services_fee_desc_2")}</li>
                                            </ul>
                                        </div>
                                        <div className="wpo-testimonial-info-text my-2">
                                            <h2 style={{ color: "#fff" }}>{t("Other_services_fee_name")}</h2>
                                            <ul style={{ fontSize: '1.3rem', color: "#fff" }}>
                                                <li>- {t("Other_services_fee_desc_1")}</li>
                                            </ul>
                                        </div>
                                        <div className="wpo-testimonial-info-text my-2">
                                            <h2 style={{ color: "#fff" }}>{t("note_name")}</h2>
                                            <ul style={{ fontSize: '1.3rem', color: "#fff" }}>
                                                <li>- {t("note_1")}</li>
                                                <li>- {t("note_2")}</li>
                                                <li>- {t("note_3")}</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </section>
    )
}


export default TheFeesComponent;