import React from 'react'
import styled, { ThemeProvider } from 'styled-components'
import {lightTheme} from './Themes';
import { Design, Develope} from './AllSvgs';


import LogoComponent from '../subComponents/LogoComponent';
import SocialIcons from '../subComponents/SocialIcons';
import PowerButton from '../subComponents/PowerButton';
import ParticleComponent from '../subComponents/ParticleComponent';
import BigTitle from '../subComponents/BigTitlte'

//Google Analytic
import ReactGA from 'react-ga4'

const Box = styled.div`
background-color: ${props => props.theme.body};
width: 100vw;
height:100vh;
position: relative;
display: flex;
justify-content: space-evenly;
align-items: center;
`

const Main = styled.div`
border: 2px solid ${props => props.theme.text};
color: ${props => props.theme.text};
background-color: ${props => props.theme.body};
padding: 1rem;
width: 34vw;
height: 60vh;
z-index:3;
line-height: 1.3;
cursor: pointer;

font-family: 'Ubuntu Mono',monospace;
display: flex;
flex-direction: column;
justify-content: space-between;

&:hover{
    color: ${props => props.theme.body};
    background-color: ${props => props.theme.text};
}
`

const Title = styled.h2`
display: flex;
justify-content: center;
align-items: center;
font-size: calc(1em + 1vw);

${Main}:hover &{
    &>*{
        fill:${props => props.theme.body};
    }
}

&>*:first-child{
margin-right: 1rem;
}
`

const Description = styled.div`
color: ${props => props.theme.text};
font-size: calc(0.6em + 1vw);
padding: 0.5rem 0;
overflow: auto;


${Main}:hover &{
   
        color:${props => props.theme.body};
    
}

strong{
    margin-bottom: 1rem;
    text-transform: uppercase;
}
ul,p{
    margin-left: 2rem;
}
`

const Tools = styled.p`
height: 18vh;
overflow-x: hidden;
`

const MySkillsPage = () => {
    ReactGA.send({
        hitType: "skillsview",
        page: "/skills",
        title: "MySkills"
    })
    return (
        <ThemeProvider theme={lightTheme}>
<Box>

<LogoComponent theme='light'/>
<SocialIcons theme='light'/>
<PowerButton />
<ParticleComponent theme='light' />
            <Main>
<Title>
    <Develope width={40} height={40} /> DevSecOps
</Title>
<Description>
Responsible for automating security testing and vulnerability scanning.
</Description>
<Description>
<strong>Skills</strong>
<p>
    K8s, Docker, Bash, CICD, Iptables, Git, LDAP, Radius, Monitoring, Observability, Security, Network, Loadbalancer, Cloudflare
</p>
</Description>
<Description>
<strong>Tools</strong>
<Tools>
K3s, Kustomize/Helm, AWS, GCP, DO, Nginx, Apache, IIS, Treafik, Kong, Openresty, ELK, Filebeat, Terraform, Ansible, Rancher, ESXI, Proxmox, Fail2ban, DroneCI, JenkinsCI, RabbitMQ, Pihole, FreeIPA, PFsense, Vaultwarden, Hashicorp Vault, Mailcow, OpenVPN Server, ArgoCD, Sentry, Grafana/Prometheus, Istio, Harbor, Kuma Monitor, N8N, Sonarqube
</Tools>
</Description>

            </Main>
            <Main>
<Title>
    <Develope width={40} height={40} /> Fullstack Developer
</Title>
<Description>
I value business or brand for which i'm creating, thus i enjoy bringing new ideas to life.
</Description>
<Description>
<strong>Skills</strong>
<p>
Html, Css, Js, Bootstrap, ExpressJS, Jquery, Php, Laravel, S3, Database etc.
</p>
</Description>
<Description>
<strong>Tools</strong>
<Tools>
VScode, Github, Gitlab, Gitea, Bitbucket, MySQL, MariaDB, PostgreSQL, MSSQL, MongoDB, Redis etc.
</Tools>
</Description>

            </Main>

            <BigTitle text="SKILLS" top="80%" right="30%" />

        </Box>

        </ThemeProvider>
        
    )
}

export default MySkillsPage