import React from 'react';
import { createStyles, styled } from '@mui/material/styles';
import { Box, Typography, Link } from '@mui/material';
import InstagramIcon from '@mui/icons-material/Instagram';
import FacebookIcon from '@mui/icons-material/Facebook';
import TwitterIcon from '@mui/icons-material/Twitter';
import PinterestIcon from '@mui/icons-material/Pinterest';

const Container = styled(Box)(({theme})=>({
    backgroundColor: theme.palette.primary.main,
    paddingTop: 10,
    paddingBottom: 10,
    width: "100%",
    display:"flex",
    position:"relative",
    minHeight:"fit-content",
    [`@media (max-width: ${theme.breakpoints.values.md}px)`]: {
        display: "none"
    },
}))

const headerStyle = createStyles({
    icon:{
        fontSize:17
    }
})


const Header = () => {

    return (
        <Container>
            <Box sx={{color:"white", px:6.1}}>
                <Box sx={{display:"flex", gap:1, cursor:"pointer"}}>
                    <InstagramIcon sx={{":hover":{color:"gray"}}} style={headerStyle.icon} onClick={()=>{window.open('https://www.instagram.com/amber.officials/?hl=en', '_blank')}} />
                    <FacebookIcon sx={{":hover":{color:"gray"}}} style={headerStyle.icon} onClick={()=>{window.open('https://www.facebook.com/amber.officials/', '_blank')}}/>
                    <TwitterIcon sx={{":hover":{color:"gray"}}} style={headerStyle.icon} onClick={()=>{window.open('https://twitter.com/amber.officials', '_blank')}}/>
                </Box>
                <Typography variant="body2" sx={{position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)" }}>Don’t miss out on our next big thing! Click <a style={{color:"white", textDecoration:"underline", cursor:'pointer'}}> here</a> to subcribe now.</Typography>
            </Box>
        </Container>
    );
};

export default Header;
