import { useTranslations } from "next-intl";
import Image from "next/image";
import { SectionUnderline } from "../ui/section-underline";

type ValueItem = {
  key: string;
};

const OurValues = () => {
  const t = useTranslations("aboutUs.values");

  const values: ValueItem[] = [
    { key: "value1" },
    { key: "value2" },
    { key: "value3" },
    { key: "value4" },
    { key: "value5" },
    { key: "value6" },
  ];
  return (
    <section className="bg-white w-full px-6 py-16 lg:px-[120px] lg:py-16">
      <div className="w-full flex flex-col lg:flex-row-reverse items-center lg:items-start justify-between gap-12 lg:gap-8">
        {/* Illustration - will be on the left in RTL (Arabic), right in LTR (English) */}
        <div className="relative w-full lg:w-[402px] h-[300px] lg:h-[400px] shrink-0">
          <Image
            src="/images/about-us/values-illustration.svg"
            alt={t("title")}
            fill
            className="object-contain"
            priority
          />
        </div>

        {/* Content - will be on the right in RTL (Arabic), left in LTR (English) */}
        <div className="flex flex-col gap-6 w-full lg:w-auto">
          {/* Header */}

          <div className="flex flex-col gap-2 items-center">
            <h2 className="font-bold text-[32px] lg:text-[40px] leading-[1.4] text-foreground text-center">
              {t("title")}
            </h2>
            <div className="flex items-center justify-center leading-0">
              <div className="scale-y-[-1]">
                <SectionUnderline className="w-[220px] h-auto" />
              </div>
            </div>
          </div>

          {/* Values List */}
          <div className="flex flex-col w-full lg:w-[551px]">
            <div className="flex flex-col gap-4 w-full">
              <p className="text-[16px] leading-[1.6] text-muted-foreground w-full lg:w-[497px]">
                {t("intro")}
              </p>

              {values.map((value) => (
                <div
                  key={value.key}
                  className="flex gap-2 items-start  w-full"
                >
                  <div className="relative shrink-0 w-6 h-6 mt-0.5">
                    <Image
                      src="/images/about-us/star-icon.svg"
                      alt="star"
                      width={24}
                      height={24}
                      className="w-6 h-6"
                    />
                  </div>
                  <p className="text-[16px] leading-[1.6]">
                    <span className="font-medium text-foreground">
                      {t(`${value.key}.title`)}{" "}
                    </span>
                    <span className="font-normal text-muted-foreground">
                      {t(`${value.key}.description`)}
                    </span>
                  </p>

                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default OurValues;