/**
 * TEAM: frontend_infra
 *
 * @flow strict
 */

import * as React from "react";
import Group from "../Group";
import Button from "../button/Button";
import Text from "../Text";
import Loader from "../Loader";

type Props = {|
  /** Callback to load additional data when a user clicks the "Load more" button */
  +onLoadMoreClick: () => void,
  /** Number of the displayed items in table */
  +fetchedItemCount: number,
  /** Number of the total items in table */
  +totalItemCount?: number,
  /** Whether additional data is currently being loaded */
  +isNextPageLoading: boolean,
|};

export default function StaticLoadingRow({
  onLoadMoreClick,
  fetchedItemCount,
  totalItemCount,
  isNextPageLoading,
}: Props): React.Node {
  if (isNextPageLoading) {
    return <Loader loaded={false} />;
  }
  return (
    <Group justifyContent="center">
      <Button
        kind="blank"
        intent="none"
        label="Load more"
        onClick={onLoadMoreClick}
      />
      <Text>
        {totalItemCount != null
          ? `Showing ${fetchedItemCount} of ${totalItemCount}`
          : `Showing ${fetchedItemCount} items`}
      </Text>
    </Group>
  );
}