type Props = {
    loaderText: string; //Тип передаваемых данных loaderText - string
}

import styled, { keyframes } from 'styled-components'
import { AnimDot } from './animDot';
import { ModalWindow } from '../modalwindows/style';


//Константа которая устанавливает кейфвреймы для вращения
const spinAnimation = keyframes`
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
`

//Стиль экрана загрузки
export const LoaderContainer = styled.div`
    top: 0px;
    z-index:998;
    background-color: rgba(0,0,0, 0.7);
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow-y: hidden;
`


//Стиль блока с элементами загрузки
export const Loaderblock = styled.div`
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;

    p{
        font-size: 24px;
        color: white;
    }
`
//Стиль для блока с кольцом загрузки
export const LoadingSpinner = styled.div`
    position: relative;
    width: 65px;
    height: 65px;
`

//Стиль для кольца загрузки
export const LoadingRing = styled.div`
    position: absolute;
    top: 0;
    left: 0;
    width: 65px;
    height: 65px;
    border-radius: 50%;
    border: 12px solid white;
`
//Стиль для части кольца загрузки, которая будет вращаться
export const LoadingPart = styled.div`
    position: absolute;
    top: 0;
    left: 0;
    width: 65px;
    height: 65px;
    border-radius: 50%;
    border: 12px solid transparent;
    border-top: 12px solid ${props => props.theme.accent};

    // Добавление аниманции и использование кейфремов
    animation: ${spinAnimation} 1s linear infinite;
`

const Text = styled.div`
    display: flex;
    gap: 3px;
    font-size: 24px;
    color: white;
    margin-top: 30px;
    margin-left: 25px;
`

export default function RouterLoader({ loaderText }: Props) {
    return (
        <ModalWindow>
            <Loaderblock>
            <LoadingSpinner>
                <LoadingRing />
                <LoadingPart />
            </LoadingSpinner>

            {/* Текст экрана загрузки устанавливается с помощью передаваемых данных loaderText */}
            <Text>{loaderText}<AnimDot/></Text>
        </Loaderblock>
        </ModalWindow>
        
    )
}