import { renderSponsorGrid, sponsorCategoryHeadingHtml } from "../components/sponsor-grid.js";
import { t } from "../config/site.js";
import { SPONSOR_BADGE_OYNADIGIM } from "../constants/sponsor-badges.js";

export async function renderRecommendedPage(outlet) {
  outlet.innerHTML = `
    <div class="space-y-8">
      <header class="border-b border-white/[0.06] pb-2 text-center">
        ${sponsorCategoryHeadingHtml(t("homeSectionOynadigim"), {
          id: "page-recommended-heading",
          tag: "h1",
          variant: "oynadigim",
        })}
      </header>
      <div id="recommended-page-mount"></div>
    </div>
  `;
  await renderSponsorGrid(outlet.querySelector("#recommended-page-mount"), {
    badgeFilter: SPONSOR_BADGE_OYNADIGIM,
  });
}
