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

interface CorrectionsSidebarProps {
  locale: string;
}

export async function CorrectionsSidebar({ locale }: CorrectionsSidebarProps) {
  const t = await getServerT(locale, "corrections.sidebar");

  const policies = [
    { num: "1", nm: t("p1_nm"), desc: t("p1_desc") },
    { num: "2", nm: t("p2_nm"), desc: t("p2_desc") },
    { num: "3", nm: t("p3_nm"), desc: t("p3_desc") },
    { num: "4", nm: t("p4_nm"), desc: t("p4_desc") },
  ];

  const relatedLinks = [
    { title: t("rel1_title"), desc: t("rel1_desc"), href: "#" },
    { title: t("rel2_title"), desc: t("rel2_desc"), href: `/about` },
    {
      title: t("rel3_title"),
      desc: t("rel3_desc"),
      href: `/contact`,
    },
  ];

  return (
    <aside className="corr-side">
      <div className="side-card accent">
        <h4>{t("policy_heading")}</h4>
        <div className="policy-list">
          {policies.map((p) => (
            <div key={p.num} className="policy-row">
              <span className="num">{p.num}</span>
              <div className="info">
                <div className="nm">{p.nm}</div>
                <div className="desc">{p.desc}</div>
              </div>
            </div>
          ))}
        </div>
      </div>

      <div className="report-card">
        <div className="lbl">{t("report_lbl")}</div>
        <h5>{t("report_heading")}</h5>
        <p>{t("report_desc")}</p>
        <a href="mailto:corrections@dtnews.in" className="btn">
          {t("report_btn")}
          <svg viewBox="0 0 24 24">
            <path d="M5 12h14M13 6l6 6-6 6" />
          </svg>
        </a>
      </div>

      <div className="side-card accent">
        <h4>{t("related_heading")}</h4>
        <div className="policy-list">
          {relatedLinks.map((link, i) => (
            <div key={i} className="policy-row policy-row-link">
              <span className="num">→</span>
              <div className="info">
                <Link href={link.href}>{link.title}</Link>
                <div className="desc">{link.desc}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </aside>
  );
}