import { getServerT, getServerLocale } from "@/lib/i18n/server";

interface PrinciplesSectionProps {
  locale: string;
}

export async function PrinciplesSection({ locale }: PrinciplesSectionProps) {
  const t = await getServerT(locale, "about");

  const principles = [
    { num: t("principles.p1_num"), title: t("principles.p1_title"), desc: t("principles.p1_desc") },
    { num: t("principles.p2_num"), title: t("principles.p2_title"), desc: t("principles.p2_desc") },
    { num: t("principles.p3_num"), title: t("principles.p3_title"), desc: t("principles.p3_desc") },
    { num: t("principles.p4_num"), title: t("principles.p4_title"), desc: t("principles.p4_desc") },
    { num: t("principles.p5_num"), title: t("principles.p5_title"), desc: t("principles.p5_desc") },
    { num: t("principles.p6_num"), title: t("principles.p6_title"), desc: t("principles.p6_desc") },
  ];

  return (
    <section className="wrap about-sec">
      <div className="about-head">
        <div>
          <div className="kicker">{t("principles.kicker")}</div>
          <h2>{t("principles.heading")}</h2>
        </div>
        <div className="right">
          <p>
            {t("principles.right")}{" "}
            <a href="#" className="about-link">{t("principles.editorial_code")}</a>
          </p>
        </div>
      </div>
      <div className="principles">
        {principles.map((p) => (
          <div key={p.num} className="principle">
            <div className="num">{p.num}</div>
            <h3>{p.title}</h3>
            <p>{p.desc}</p>
          </div>
        ))}
      </div>
    </section>
  );
}