import { css } from "@emotion/react";

import type { LoadMoreButtonProps } from "@phoenix/components/core/LoadMoreButton";
import { LoadMoreButton } from "@phoenix/components/core/LoadMoreButton";

const rowCSS = css`
  position: relative;
`;
const tdCSS = css`
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
`;

/**
 * A table row that is used to load more data.
 * @returns A table row that is used to load more data.
 */
export function LoadMoreRow({
  onLoadMore,
  isLoadingNext,
}: LoadMoreButtonProps) {
  return (
    <tr css={rowCSS}>
      <td colSpan={100} css={tdCSS}>
        <LoadMoreButton onLoadMore={onLoadMore} isLoadingNext={isLoadingNext} />
      </td>
    </tr>
  );
}
