import styled from "styled-components"
    import { MainButton } from "../../../UI/buttons/mainButton"
    import { useWorkSpaceStore } from "../../../../store"
    import { workSpaceNames } from "../../../../const/workspace/names"
    import { buttonNames } from "../../../../const/buttons/names"

    const Wrapper = styled.div`
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: ${(props => props.theme.background)};
        background-image: url('./assets/images/back1.svg');
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: bottom;
    `

    const Container = styled.div`
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 52px;
        margin-bottom: 100px;
    `

    const ButtonWrapper = styled.div`
        display: flex; 
        gap: 75px;
        flex-direction: column;
    `

    const ButtonContainer = styled.div`
        display: flex; 
        gap: 15px;
        flex-direction: column;
    `

    const Title = styled.div`
        display: flex;
        align-items: flex-end;
        gap: 10px;
    
        h1{
            font-size: 52px;
        }
    `

    export const HelloWindow = () => {

        const { setWorkModule } = useWorkSpaceStore()

        return (
            <Wrapper>
                <Container className="unselectable">
                    <Title>
                        <img src="./assets/images/logo.svg" alt="" style={{width: '152px'}}/>
                    </Title>


                    <ButtonWrapper>
                        <ButtonContainer>
                            <MainButton
                                title="Настройки сети"
                                icon={buttonNames[3]}
                                iconSize={{ width: '32', height: '32' }}
                                onClick={() => setWorkModule(workSpaceNames[3])}
                            />
                            <MainButton
                                title="О программе"
                                icon={buttonNames[4]}
                                iconSize={{ width: '32', height: '32' }}
                                onClick={()=>setWorkModule(workSpaceNames[4])}
                            />
                        </ButtonContainer>
                    </ButtonWrapper>
                </Container>
            </Wrapper>
        )
    }