import { FaEnvelope, FaGithub } from 'react-icons/fa';
import TechScroller from '../components/TechScroller';
import Logo from '../components/Logo';
import {
  StyledBrandName,
  StyledLinkIcon,
  StyledLanding,
  StyledLandingWrapper,
  StyledLinkIcons,
  StyledLandingRight,
} from '../components/styles/Landing.styled';

export default function LandingSection() {
  return (
    <StyledLanding id="landing">
      <StyledLandingWrapper>
        <div className="landing_main">
          <Logo />
          <StyledLandingRight>
            <b className="greeting">Hello, I'm</b>

            <StyledBrandName>
              <b className="text--gradient">SPYTHERE://</b>
            </StyledBrandName>

            <div className="description">an amatour and self-taught front-end and back-end developer from Poland!</div>

            <StyledLinkIcons>
              <StyledLinkIcon href="https://github.com/Spythere" target="_blank">
                <FaGithub />
              </StyledLinkIcon>
              <StyledLinkIcon href="mailto:spythere@proton.me">
                <FaEnvelope />
              </StyledLinkIcon>
              <StyledLinkIcon></StyledLinkIcon>
              <StyledLinkIcon></StyledLinkIcon>
            </StyledLinkIcons>
          </StyledLandingRight>
        </div>

        <div className="landing_tech">
          <h3>Tech I Use</h3>
          <hr />

          <TechScroller />
        </div>
      </StyledLandingWrapper>
    </StyledLanding>
  );
}
