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


const ObligationsComponent = (props) => {
    const { locale } = useRouter();
    const t = useTranslations("company_obligations");
    const t1 = useTranslations("office_obligations");
    return (
        <section className={`wpo-practice-section-s3 ${props.pClass}`}>
            <div className="container">
                <div className="wpo-practice-wrap">
                    <div className="row">
                        <div className="col-lg-6 col-md-12 col-12">
                            <div style={{ height: `${locale === 'ar' ? "760px" : "1050px"}` }} className="wpo-practice-item">
                                <div className="wpo-section-title-s2">
                                    <h2>{t("company_obligations_name")}</h2>
                                </div>
                                <div style={{ textAlign: `${locale === "ar" ? "right" : "left"}` }} className="wpo-practice-content">
                                    <div className="wpo-testimonial-info-text">
                                        <div className='my-3'>
                                            <h3 style={{ textDecoration: "underline", color: "#fff" }}>{t("company_obligations_p_1")}</h3>
                                            <p style={{ color: "#fff" }}>- {t("company_obligations_p_2")}</p>
                                            <p style={{ color: "#fff" }}>- {t("company_obligations_p_3")}</p>
                                            <p style={{ color: "#fff" }}>- {t("company_obligations_p_4")}</p>
                                        </div>
                                        <div className='my-3'>
                                            <h3 style={{ textDecoration: "underline", color: "#fff" }}>{t("company_obligations_p_5")}</h3>
                                            <p style={{ color: "#fff" }}>- {t("company_obligations_p_6")}</p>
                                            <p style={{ color: "#fff" }}>- {t("company_obligations_p_7")}</p>
                                            <p style={{ color: "#fff" }}>- {t("company_obligations_p_8")}</p>
                                        </div>
                                        <div className='my-3'>
                                            <h3 style={{ textDecoration: "underline", color: "#fff" }}>{t("company_obligations_p_fees_1")}</h3>
                                            <p style={{ color: "#fff" }}>- {t("company_obligations_p_fees_2")}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="col-lg-6 col-md-12 col-12">
                            <div style={{ height: `${locale === 'ar' ? "760px" : "1050px"}` }} className="wpo-practice-item">
                                <div className="wpo-section-title-s2">
                                    <h2>{t1("office_obligations_name")}</h2>
                                </div>
                                <div style={{ textAlign: `${locale === "ar" ? "right" : "left"}` }} className="wpo-practice-content">
                                    <div className="wpo-testimonial-info-text">
                                        <div className='my-3'>
                                            <h3 style={{ textDecoration: "underline", color: "#fff" }}>{t1("office_obligations_p_1")}</h3>
                                        </div>
                                        <div className='my-3'>
                                            <h3 style={{ textDecoration: "underline", color: "#fff" }}>{t1("office_obligations_p_2")}</h3>
                                            <p style={{ color: "#fff" }}>- {t1("office_obligations_p_3")}</p>
                                        </div>
                                        <div className='my-3'>
                                            <h3 style={{ textDecoration: "underline", color: "#fff" }}>{t1("office_obligations_p_4")}</h3>
                                            <p style={{ color: "#fff" }}>- {t1("office_obligations_p_5")}</p>
                                        </div>
                                        <div className='my-3'>
                                            <h3 style={{ textDecoration: "underline", color: "#fff" }}>{t1("office_obligations_p_6")}</h3>
                                            <p style={{ color: "#fff" }}>- {t1("office_obligations_p_7")}</p>
                                        </div>
                                        <div className='my-3'>
                                            <h3 style={{ textDecoration: "underline", color: "#fff" }}>{t1("office_obligations_p_8")}</h3>
                                            <p style={{ color: "#fff" }}>- {t1("office_obligations_p_9")}</p>
                                        </div>
                                        <div style={{ color: "#fff", textAlign: "center" }} className='my-3'>
                                            {t1("office_obligations_p_note")}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    )
}


export default ObligationsComponent;