import React from "react";
import { HideOnSmall, StyledP } from "./paginationHelpers";

const NAME = "PaginationDescriptiveDisplay";

export type PaginationCompactDisplayProps = {
  /** If compact variant */
  compact: boolean;
  /** The current page */
  currentPage: number;
  /** Whether or not endless pagination */
  endlessPagination: boolean;
  /** Total number of pages to display */
  totalPages: number;
  /** Component variant */
  variant: string;
};

export const PaginationDescriptiveDisplay = ({
  compact,
  currentPage,
  endlessPagination,
  totalPages,
  variant,
}) => {
  const descriptive = variant === "descriptive";

  if (!descriptive) return null;

  return (
    <HideOnSmall compact={compact}>
      <StyledP>
        {!endlessPagination
          ? `${currentPage} of ${totalPages} pages`
          : `Page ${currentPage}`}
      </StyledP>
    </HideOnSmall>
  );
};

PaginationDescriptiveDisplay.displayName = NAME;