"use client";

import { useTranslations } from "next-intl";
import Image from "next/image";

interface KeyFeaturesProps {
  isInToolPage?: boolean; // Whether it is in the tool page (e.g. homepage)
  className?: string; // Custom style class
  showTitle?: boolean; // Whether to display the title
  titleClassName?: string; // Title style class
}

export default function KeyFeatures({
  isInToolPage = false,
  className = "",
  showTitle = true,
  titleClassName = "",
}: KeyFeaturesProps) {
  const t = useTranslations("text.KeyFeatures");

  // Set container styles
  const containerClasses = `container mx-auto px-4 py-8 ${className}`;
  const defaultTitleClasses = "font-semibold mb-6";
  const titleClasses = `${defaultTitleClasses} ${titleClassName}`.trim();

  return (
    <section className={containerClasses}>
      {showTitle &&
        (isInToolPage ? (
          <h2 className={`text-3xl ${titleClasses}`}>
            {t("h2")}
          </h2>
        ) : (
          <h1 className={`text-4xl ${titleClasses}`}>
            {t("h2")}
          </h1>
        ))}
      <div className="space-y-6">
        <div>
          <h3 className="text-xl font-semibold mb-2 flex items-center">
            <Image src="/lock.png" alt="Icon" width={80} height={80} />
            <span className="ml-6">{t("h3_1")}</span>
          </h3>
          <p>{t("h3_1_P")}</p>
        </div>
        <div>
          <h3 className="text-xl font-semibold mb-2 flex items-center">
            <Image src="/teamwork.png" alt="Icon" width={80} height={80} />
            <span className="ml-6">{t("h3_2")}</span>
          </h3>
          <p>{t("h3_2_P")}</p>
        </div>
        <div>
          <h3 className="text-xl font-semibold mb-2 flex items-center">
            <Image src="/rocket.png" alt="Icon" width={80} height={80} />
            <span className="ml-6">{t("h3_3")}</span>
          </h3>
          <p>{t("h3_3_P")}</p>
        </div>
        <div>
          <h3 className="text-xl font-semibold mb-2 flex items-center">
            <Image src="/fresh-air.png" alt="Icon" width={80} height={80} />
            <span className="ml-6">{t("h3_4")}</span>
          </h3>
          <p>{t("h3_4_P")}</p>
        </div>
        <div>
          <h3 className="text-xl font-semibold mb-2 flex items-center">
            <Image src="/planet-earth.png" alt="Icon" width={80} height={80} />
            <span className="ml-6">{t("h3_5")}</span>
          </h3>
          <p>{t("h3_5_P")}</p>
        </div>
        <div>
          <h3 className="text-xl font-semibold mb-2 flex items-center">
            <Image
              src="/ResumableTransfers.png"
              alt="Icon"
              width={100}
              height={83}
            />
            <span className="ml-6">{t("h3_6")}</span>
          </h3>
          <p>{t("h3_6_P")}</p>
        </div>
      </div>
    </section>
  );
}