type T = (k: string) => string;

export function ResourceListFooter({
  page,
  limit,
  total,
  t,
  onPrev,
  onNext,
}: {
  page: number;
  limit: number;
  total: number;
  t: T;
  onPrev: () => void;
  onNext: () => void;
}) {
  const pages = Math.max(1, Math.ceil(total / limit));
  const from = total === 0 ? 0 : (page - 1) * limit + 1;
  const to = Math.min(page * limit, total);
  return (
    <div className="flex flex-col items-center justify-between gap-3 border-t border-ark-line pt-6 sm:flex-row">
      <p className="text-sm text-neutral-400">
        {t("listRange")
          .replace("{{from}}", String(from))
          .replace("{{to}}", String(to))
          .replace("{{total}}", String(total))}
      </p>
      <div className="flex items-center gap-2">
        <button
          type="button"
          disabled={page <= 1}
          onClick={onPrev}
          className="rounded-full border border-ark-line px-4 py-2 text-sm text-neutral-200 outline-none transition hover:border-ark-gold disabled:cursor-not-allowed disabled:opacity-40 focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg"
        >
          {t("paginationPrev")}
        </button>
        <span className="text-sm text-ark-muted tabular-nums">
          {t("pageIndicator")
            .replace("{{c}}", String(page))
            .replace("{{p}}", String(pages))}
        </span>
        <button
          type="button"
          disabled={page >= pages}
          onClick={onNext}
          className="rounded-full border border-ark-line px-4 py-2 text-sm text-neutral-200 outline-none transition hover:border-ark-gold disabled:cursor-not-allowed disabled:opacity-40 focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg"
        >
          {t("paginationNext")}
        </button>
      </div>
    </div>
  );
}