import React from "react";
import { StyledButton } from "./paginationHelpers";
import type { Button } from "../button";
import type * as WPDS from "../theme";

const NAME = "PaginationPageButton";

export type PaginationPageButtonProps = {
  /** Function to change current page */
  changePage: React.Dispatch<React.SetStateAction<number>>;
  /** Override CSS */
  css?: WPDS.CSS;
  /** The current page */
  currentPage: number;
  /** Page number */
  num: number;
  /** Current page slug */
  slug: string;
} & React.ComponentPropsWithRef<typeof Button> &
  React.ComponentProps<typeof StyledButton>;

export const PaginationPageButton = ({
  changePage,
  css,
  currentPage,
  num,
  slug,
  disabled,
  hidden,
  icon,
  children = num,
}: PaginationPageButtonProps) => {
  const selected = currentPage === num;
  const href = !slug?.length ? null : `${slug}?page=${num}`;
  return (
    <StyledButton
      as="a"
      aria-label={`page ${num}`}
      aria-hidden={hidden}
      css={{
        ...css,
      }}
      density="compact"
      disabled={disabled}
      hidden={hidden}
      href={href} // update URL as well, and canonical in head
      icon={icon}
      isOutline={false}
      key=""
      onClick={() => changePage(num)}
      selected={selected}
      variant="secondary"
    >
      {children}
    </StyledButton>
  );
};

PaginationPageButton.displayName = NAME;