import { t } from "../config/site.js";

const SHIM = "skeleton-shimmer";

function skelBar(w, h, extra = "") {
  return `<span class="${SHIM} block ${h} ${w} rounded-lg bg-white/[0.07] ${extra}"></span>`;
}

export function homeEventsSkeletonHtml() {
  const card = `
    <div class="home-skeleton-card home-event-card flex min-w-0 flex-col items-center rounded-xl border border-white/[0.06] bg-[#1e2739]/80 p-2.5 lg:p-4">
      ${skelBar("h-9 w-9 lg:h-14 lg:w-14", "rounded-full")}
      ${skelBar("mt-2 h-3.5 w-[78%] lg:mt-3 lg:h-4", "")}
      ${skelBar("mt-1.5 h-3 w-[55%] lg:mt-2", "")}
      <div class="mt-2 flex w-full gap-1 lg:mt-3 lg:gap-1.5">${Array(4).fill(skelBar("h-7 flex-1 rounded-md lg:h-9", "")).join("")}</div>
      ${skelBar("mt-2.5 h-8 w-full rounded-lg lg:mt-4 lg:h-9 lg:rounded-xl", "")}
    </div>`;
  return `
    <section class="home-events home-skeleton" aria-busy="true" aria-label="${t("skeletonLoading")}">
      <div class="home-skeleton-title mx-auto mb-6">${skelBar("h-7 w-44", "mx-auto")}</div>
      <div class="home-events__carousel home-skeleton-events">
        <div class="home-events__viewport">
          <div class="home-events__track grid grid-cols-2 gap-2">${Array(4).fill(card).join("")}</div>
        </div>
      </div>
    </section>`;
}

export function homeTicketsSkeletonHtml() {
  const card = `
    <div class="home-skeleton-card home-ticket-card flex min-w-0 flex-col items-center rounded-xl border border-white/[0.06] bg-[#1e2739]/80 p-2.5 sm:min-w-[11rem] sm:p-4">
      ${skelBar("h-9 w-9 sm:h-12 sm:w-12", "rounded-lg")}
      ${skelBar("mt-2 h-3.5 w-[85%] sm:mt-3 sm:h-4", "")}
      ${skelBar("mt-1.5 h-3 w-[60%] sm:mt-2", "")}
      <div class="mt-2 flex w-full gap-1 sm:mt-3">${Array(4).fill(skelBar("h-7 flex-1 rounded-md sm:h-8", "")).join("")}</div>
      ${skelBar("mt-2.5 h-8 w-full rounded-lg sm:mt-4 sm:h-9 sm:rounded-xl", "")}
    </div>`;
  return `
    <section class="home-tickets home-skeleton" aria-busy="true" aria-label="${t("skeletonLoading")}">
      <div class="home-skeleton-title mx-auto mb-6">${skelBar("h-7 w-40", "mx-auto")}</div>
      <div class="home-tickets__list flex gap-3 overflow-hidden">${Array(4).fill(card).join("")}</div>
    </section>`;
}
