import React, { useContext } from 'react';
import SearchResultsConfigurationContext from '../../search-results-configuration-context';
import { getTranslations } from '../../../shared/utils/localization-util';

type SpinnerProps = {
  label?: string;
};

const Spinner: React.FC<SpinnerProps> = ({ label }) => {
  const context = useContext(SearchResultsConfigurationContext);
  const translations = getTranslations(context?.languageCode ?? 'en-GB');
  return (
    <div className="loader__container">
      <div className="loader__line">
        <li className="loader__ball loader__ball--1"></li>
        <li className="loader__ball loader__ball--2"></li>
        <li className="loader__ball loader__ball--3"></li>
      </div>
      <div data-text={label ?? translations.SRP.LOADING} className="loader__line__text"></div>
    </div>
  );
};

export default Spinner;