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

import type { JSX } from 'react';

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

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 {
  const { useTranslate } = useThemeHooks();
  const { translate } = useTranslate();

  return (
    <div style={{ textAlign: 'center' }}>
      <LoadingMessage color={color}>{translate('loaders.loading', 'Loading...')}</LoadingMessage>
      <Spinner color={color} />
    </div>
  );
}