import Image from "next/image";
import React from "react";
import { useTranslation } from "next-i18next";
import CareerForm from "../career-form";
import styles from "./Jobs.module.scss";
import image from "../../../public/images/career/background.png";
import TitleWithLine from "../../molecules/title-with-line/TitleWithLine";
import useIsRtl from "../../particles/hooks/useIsRtl";

const Jobs = ({ data, selectedJob }: any) => {
  const { t } = useTranslation("common");

  const isRtl = useIsRtl();

  return (
    <article className={styles.jobs}>
      <div className="container">
        <div className="lg:flex">
          <div className="hidden lg:block lg:flex-1 image">
            <Image src={image} alt="" />
          </div>

          <div className="flex-1 pt-16">
            <div className="lg:w-5/6">
              <div className="mb-8">
                <TitleWithLine>
                  <h1 className="text-gradiant">{t("Jobs")}</h1>
                </TitleWithLine>
              </div>

              {isRtl && (
                <p className="mb-9">
                  وريم إيبسوم(Lorem Ipsum) هو ببساطة نص شكلي (بمعنى أن الغاية هي الشكل وليس المحتوى)
                  ويُستخدم في صناعات المطابع ودور النشر. كان لوريم إيبسوم ولايزال المعيار للنص
                  الشكلي منذ القرن الخامس عشر عندما قامت مطبعة مجهولة برص مجموعة من الأحرف بشكل
                  عشوائي أخذتها من نص، لتكوّن كتيّب بمثابة دليل أو مرجع شكلي لهذه الأحرف. خمسة قرون
                  من الزمن لم تقضي على هذا النص، بل انه حتى صار مستخدماً وبشكله الأصلي في الطباعة
                </p>
              )}

              {!isRtl && (
                <p className="mb-9">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sagittis, convallis
                  mauris eget varius sed cras. Integer parturient pulvinar id consectetur. Odio
                  cursus vitae nec elementum posuere pretium bibendum purus. Pretium vel eu velit
                  morbi pharetra, tempus, tortor, hendrerit. Nunc aliquet massa integer pulvinar.
                </p>
              )}

              <CareerForm data={data} selectedJob={selectedJob} />
            </div>
          </div>
        </div>
      </div>
    </article>
  );
};

export default Jobs;