import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import styled, { css } from 'styled-components';
import { LoaderIcon } from '../../icons/scality-loading';
import { fontSize, svgSize } from '../../style/theme';
import { getThemePropSelector } from '../../utils';
import { LOADER_SIZE as SIZE } from '../constants';
const LoaderContainer = styled.div `
  display: flex;
  ${(props) => {
    return css `
      font-size: ${fontSize[props.size]};
      svg {
        height: ${svgSize[props.size]};
        width: ${svgSize[props.size]};
        fill: ${props.color};
      }
    `;
}}

  ${(props) => {
    if (props.centered)
        return css `
        height: 100vh;
        justify-content: center;
        align-items: center;
      `;
}}
`;
const LoaderText = styled.span `
  padding: 10px 0;
  color: ${getThemePropSelector('textPrimary')};
`;
const LoaderTextDiv = styled.span `
  display: flex;
  flex-flow: column;
  align-items: center;
`;
function Loader({ children, color = '#A14FBF', size = SIZE.large, centered = false, ...rest }) {
    return (_jsx(LoaderContainer, { size: size, color: color, centered: centered, className: "sc-loader", ...rest, children: _jsxs(LoaderTextDiv, { children: [_jsx(LoaderIcon, {}), children && _jsxs(LoaderText, { children: [" ", children] })] }) }));
}
export { Loader };
