import styled from "styled-components"
import { useNavigate } from "react-router-dom"

const Container = styled.div`
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 25px;
    text-align: center;

    h1, h2, h3, p{
        margin: 0;
    } 
`

const Content = styled.div`
    max-width: 450px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 100px;
    button{
        width: 250px;
    }
`

const Row = styled.div`
    display: flex;
    gap: 10px;
    align-items: flex-end;
    justify-content: center;
    margin-left: 50px;
`

const Column = styled.div`
    display: flex;
    flex-direction: column;
    gap: 10px;
`

export default function About() {
    const navigate = useNavigate()
    const redirect = (path: string) => {
        navigate(path)
    }


    return (
        <Container>
            <Content>
                <Row>
                    <h1>GoNetMan</h1>
                    <p>v 0.0.1</p>
                </Row>

                <Column>
                    <h3>О программе</h3>
                    GoNetMan - Это приложение представляющее собой панель управления сетевыми настройками в удобном и понятном графическом виде.
                </Column>

                <p>Copyright © ООО "Гибридные офисные системы"</p>

                <button onClick={()=>redirect('/')}>В меню</button>
            </Content>
        </Container>
    )
}