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

interface RecognitionSectionProps {
  locale: string;
}

const AwardIcon = () => (
  <div className="icn">
    <svg viewBox="0 0 24 24">
      <circle cx="12" cy="8" r="6" />
      <path d="M9 13.6 7 22l5-3 5 3-2-8.4" />
    </svg>
  </div>
);

export async function RecognitionSection({ locale }: RecognitionSectionProps) {
  const t = await getServerT(locale, "about.recognition");

  const awards = [
    { yr: t("a1_yr"), nm: t("a1_nm"), src: t("a1_src") },
    { yr: t("a2_yr"), nm: t("a2_nm"), src: t("a2_src") },
    { yr: t("a3_yr"), nm: t("a3_nm"), src: t("a3_src") },
    { yr: t("a4_yr"), nm: t("a4_nm"), src: t("a4_src") },
    { yr: t("a5_yr"), nm: t("a5_nm"), src: t("a5_src") },
    { yr: t("a6_yr"), nm: t("a6_nm"), src: t("a6_src") },
    { yr: t("a7_yr"), nm: t("a7_nm"), src: t("a7_src") },
    { yr: t("a8_yr"), nm: t("a8_nm"), src: t("a8_src") },
    { yr: t("a9_yr"), nm: t("a9_nm"), src: t("a9_src") },
    { yr: t("a10_yr"), nm: t("a10_nm"), src: t("a10_src") },
    { yr: t("a11_yr"), nm: t("a11_nm"), src: t("a11_src") },
    { yr: t("a12_yr"), nm: t("a12_nm"), src: t("a12_src") },
  ];

  return (
    <section className="wrap about-sec">
      <div className="about-head">
        <div>
          <div className="kicker">{t("kicker")}</div>
          <h2>{t("heading")}</h2>
        </div>
        <div className="right">
          <p>{t("right")}</p>
        </div>
      </div>
      <div className="recognition">
        {awards.map((award, i) => (
          <div key={i} className="award">
            <AwardIcon />
            <div className="yr">{award.yr}</div>
            <div className="nm">{award.nm}</div>
            <div className="src">{award.src}</div>
          </div>
        ))}
      </div>
    </section>
  );
}