"use client";
import { jsx } from "../../packages/jsx/src/jsx-runtime.js";
import { focusStyle } from "./styles.js";
import { BorderRadius } from "../../tokens/BorderRadius.js";
import { Text } from "../../atoms/Text/Text.js";
import { ButtonOrLink } from "../../atoms/ButtonOrLink/ButtonOrLink.js";
const pageLinkStyles = {
  display: "flex",
  justifyContent: "center",
  alignItems: "center",
  width: "28px",
  height: "28px",
  borderRadius: BorderRadius.S,
  backgroundColor: "White8",
  "&:hover": {
    backgroundColor: "White16"
  },
  "&:active": {
    "> span, > svg": {
      color: "White64"
    }
  },
  "&:focus-visible": focusStyle,
  "&[aria-current]": {
    backgroundColor: "White16"
  }
};
function PageLink({ href, onClick, page, isCurrent = false, children }) {
  return /* @__PURE__ */ jsx(
    ButtonOrLink,
    {
      href,
      title: `Go to page ${page}`,
      "aria-current": isCurrent ? "page" : void 0,
      onClick: (event) => {
        event.preventDefault();
        onClick == null ? void 0 : onClick(event);
      },
      sx: pageLinkStyles,
      children: children || /* @__PURE__ */ jsx(Text.P12, { as: "span", children: page })
    }
  );
}
export {
  PageLink
};
