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

const HomeAboutUs = ({
  years_no,
  awards_no,
  clients_no,
  projects_no,
  aboutTitle,
  aboutShortDescription,
}: any) => {
  const { t } = useTranslation("common");

  return (
    <article className="relative h-full">
      <div className="flex justify-between h-full">
        <div className="lg:w-1/2 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">{t("About Baas")}</h1>
              </TitleWithLine>
            </div>

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

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

            <div className="max-lg:flex justify-center mb-16">
              <Link href="/about-us">
                <Button>{t("Read More")}</Button>
              </Link>
            </div>

            <HomeCountables
              yearsNumber={years_no}
              projectsNumber={projects_no}
              clientsNumber={clients_no}
              awardsNumber={awards_no}
            />
          </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;