import styles from "./Services.module.scss";

import React from "react";

import Head from "next/head";
import Image from "next/image";

import { useTranslation } from "next-i18next";

import AppContext from "../../particles/contexts/app-context";
import AppTemplate from "../../templates/app";
import Footer from "../../organisms/footer";
import Header from "../../organisms/header";
import Service from "../../organisms/service";
import downloadIcon from "../../../public/icons/download.svg";
import Menu from "../../molecules/menu";
import Link from "next/link";

const ServicesPage = ({ selectedId, services, appData }: any) => {
  const { t } = useTranslation("common");

  const selectedService = services?.find((service: any) => service.id == selectedId) || null;

  return (
    <AppContext.Provider value={appData}>
      <AppTemplate header={<Header />} footer={<Footer />}>
        <Head>
          <title>BASS</title>
        </Head>

        <main className={styles.main}>
          <div className="mt-10">
            <div className="container">
              <div className="flex">
                <div className="flex-1 mr-8">
                  <div className="mb-8">
                    <div className="lg:flex items-baseline">
                      <h1 className="ltr:mr-6 rtl:ml-6 mb-4 text-gradiant">{t("Our Services")}</h1>

                      <hr className="flex-1 border-color-2" />
                    </div>
                  </div>
                </div>

                <div className="flex-1 lg:flex-2 ltr:ml-8 rtl:mr-8">
                  <div className="flex justify-end mb-11">
                    {selectedService?.service_file && (
                      <Link target="_blank" href={selectedService.service_file}>
                        <div className="flex items-center">
                          <div className="download-icon ltr:mr-4 rtl:ml-4">
                            <Image src={downloadIcon} alt="" />
                          </div>

                          <div>{t("Download PDF")}</div>
                        </div>
                      </Link>
                    )}
                  </div>
                </div>
              </div>

              <div className="lg:flex">
                <div className="flex-1 lg:mr-8 mb-8 lg:mb-0">
                  <Menu items={services} selectedId={selectedId} />
                </div>

                {selectedService && (
                  <div className="flex-2 ltr:lg:ml-8 rtl:lg:mr-8">
                    <Service data={selectedService} />
                  </div>
                )}
              </div>
            </div>
          </div>
        </main>
      </AppTemplate>
    </AppContext.Provider>
  );
};

export default ServicesPage;
