import React from "react";
import Link from "next/link";
import SectionTitle from "../SectionTitle/SectionTitle";
import Image from "next/image";
import { useTranslation } from "next-i18next";

const ClickHandler = () => {
  if (typeof window !== "undefined") {
    window.scrollTo(0, 0);
  }
};

const ServicesSection = (props) => {
  const { t } = useTranslation("services");

  // Get campaigns array from translation json
  const campaigns = t("campaigns", { returnObjects: true });

  return (
    <div className={`wpo-campaign-area section-padding ${props.cmClass || ""}`}>
      <div className="container">
        <SectionTitle subTitle={t("page.subtitle")} Title={t("page.title")} />

        <div className="wpo-campaign-wrap">
          <div className="row">
            {campaigns.map((campaign, index) => (
              <div className="col-lg-4 col-md-6 col-12" key={campaign.id || index}>
                <div className="wpo-campaign-single">
                  <div className="wpo-campaign-item">
                    <div className="wpo-campaign-img">
                      <Image
                        src={campaign.sImgS}
                        alt={campaign.sTitle}
                        width={400}
                        height={250}
                        unoptimized
                      />
                    </div>
                    <div className="wpo-campaign-content">
                      <div className="wpo-campaign-text-top data-theem">
                        <h3>
                          <Link
                            href={`/services/${campaign.slug}`}
                            onClick={ClickHandler}
                          >
                            {campaign.sTitle.length > 20
                              ? campaign.sTitle.substring(0, 20) + "..."
                              : campaign.sTitle
                            }
                          </Link>
                        </h3>
                        <p>
                          {campaign.description.length > 70
                            ? campaign.description.substring(0, 70) + "..."
                            : campaign.description
                          }
                        </p>
                        <div className="services-btn">
                          <Link
                            href={`/services/${campaign.slug}`}
                            className="theme-btn full-width-btn"
                            onClick={ClickHandler}
                          >
                            {t("page.viewButton")}
                          </Link>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

export default ServicesSection;