import React, { JSX } from 'react';
import styled from 'styled-components';

import { Button } from '@redocly/theme/components/Button/Button';

export function LoadMore({
  icon,
  onClick,
  disabled,
  blinking,
  label,
}: {
  icon: JSX.Element;
  onClick: () => void;
  disabled: boolean;
  blinking: boolean;
  label: string;
}) {
  return (
    <LoadMoreWrapper data-component-name="LoadMore/LoadMore">
      <Button
        variant="secondary"
        icon={icon}
        iconPosition="left"
        onClick={onClick}
        disabled={disabled}
        blinking={blinking}
      >
        {label}
      </Button>
    </LoadMoreWrapper>
  );
}

const LoadMoreWrapper = styled.div`
  display: flex;
  justify-content: center;
  margin-top: var(--spacing-xs);
`;