import type React from "react";
import { Icon } from "../icon";
import { DotsHorizontal } from "@washingtonpost/wpds-assets";
import { PaginationPageButton } from "./PaginationPageButton";

const NAME = "PaginationOverflowButton";

export type PaginationOverflowButtonProps = {
  /** Total number of pages to display */
  totalPages: number;
} & React.ComponentPropsWithRef<typeof PaginationPageButton>;

export const PaginationOverflowButton = ({
  currentPage,
  totalPages,
  ...rest
}: PaginationOverflowButtonProps) => {
  if (totalPages < 8) return null;

  return (
    <PaginationPageButton
      css={{
        padding: "$075 $050 $025 $050 !important",
      }}
      disabled={false}
      icon="center"
      currentPage={currentPage}
      {...rest}
    >
      <Icon label="" size="100">
        <DotsHorizontal />
      </Icon>
    </PaginationPageButton>
  );
};

PaginationOverflowButton.displayName = NAME;