import { Fragment, h } from "@stencil/core";
import { createStyleSheet } from "../../styling/JSS";
const style = {
  Container: {
    display: "flex",
    justifyContent: "flex-end",
    alignItems: "center",
    gap: "var(--sl-spacing-small)",
    width: "100%",
  },
  TextContainer: {
    display: "flex",
    gap: "var(--sl-spacing-xx-small)",
  },
};
const sheet = createStyleSheet(style);
const styleString = sheet.toString();
export function PaginationView(props) {
  const { states, callbacks, text, buttonType } = props;
  const { onNext, onPrev } = callbacks;
  const { currentPage, totalPages, loading } = states;
  if (totalPages === 1)
    return h(Fragment, null);
  return (h("span", { class: sheet.classes.Container, part: "sqm-base" },
    h("style", { type: "text/css" }, styleString),
    !loading && (h(Fragment, null,
      h("sl-button", { exportparts: `base: ${buttonType}button-base`, onClick: onPrev, part: "sqm-pagination-button", circle: true, disabled: currentPage === 1 },
        h("sl-icon", { name: "chevron-left", label: "Previous Page" })),
      h("div", { class: sheet.classes.TextContainer }, text.paginationText))),
    h("sl-button", { exportparts: `base: ${buttonType}button-base`, onClick: onNext, part: "sqm-pagination-button", circle: true, disabled: currentPage === totalPages },
      h("sl-icon", { name: "chevron-right", label: "Previous Page" }))));
}
