import React from "react";
import Image from "next/image";
import { useTranslation } from "next-i18next";
import TitleWithLine from "../../molecules/title-with-line/TitleWithLine";
import Button from "../../atoms/button";
import image from "../../../public/images/career/background.png";
import { HomeSlide } from "../../molecules/home-slide-switcher/HomeSlideSwitcher";
import Link from "next/link";

const HomeAboutUs = ({ title, description }: any) => {
  const { t } = useTranslation("common");

  return (
    <article id={HomeSlide.Careers} className="relative h-full">
      <div className="flex justify-between h-full">
        <div className="lg:w-2/3 h-full">
          <div className="container h-full flex flex-col justify-center">
            <div className="mb-8">
              <TitleWithLine>
                <h1 className="text-color-1 text-4xl lg:text-5xl uppercase">{t("Careers")}</h1>
              </TitleWithLine>
            </div>

            <div className="font-bold text-2xl mb-4">{title}</div>

            <div className="mb-8" dangerouslySetInnerHTML={{ __html: description }}></div>

            <div className="max-lg:flex justify-center">
              <Link href="/career">
                <Button>{t("Apply Now")}</Button>
              </Link>
            </div>
          </div>
        </div>

        <div className="hidden lg:flex w-1/2 justify-end h-full">
          <Image src={image} alt="" className="h-full object-cover" />
        </div>
      </div>
    </article>
  );
};

export default HomeAboutUs;