import React from 'react';
import styled from 'styled-components';

import { getCssColorVariable } from '@redocly/theme/core/utils';
import { Spinner } from '@redocly/theme/icons/Spinner/Spinner';

const LoadingMessage = styled.div<{ color: string }>`
  font-family: helvetica, sans, sans-serif;
  width: 100%;
  text-align: center;
  font-size: 25px;
  margin: 30px 0 20px 0;
  color: ${({ color }) => getCssColorVariable(color)};
`;

export type LoadingProps = {
  color: string;
};

export function Loading({ color }: LoadingProps): JSX.Element {
  return (
    <div style={{ textAlign: 'center' }}>
      <LoadingMessage color={color}>Loading ...</LoadingMessage>
      <Spinner color={color} />
    </div>
  );
}