import { FaBriefcase, FaHeart, FaStar, FaUserGraduate } from 'react-icons/fa';
import { StyledAbout } from '../components/styles/About.styled';
import { StyledCursor } from '../components/styles/Cursor.styled';
import { StyledSectionHeader } from '../components/styles/SectionHeader.styled';

function AboutSection() {
  return (
    <StyledAbout id="about">
      <div className="about-grid">
        <div className="about-gif">
          <img src="hello-world.gif" alt="" />
        </div>

        <div className="about-content">
          <StyledSectionHeader>
            ABOUT{' '}
            <span className="text--accent" style={{ position: 'relative' }}>
              ME
              <StyledCursor />
            </span>
          </StyledSectionHeader>

          <h2>A coder with a pinch of explorer</h2>

          <p>
            I am a self-taught programmer who excels in working with web technologies. I spend most of my free time creating and expanding
            applications for the Polish train simulator,{' '}
            <a href="https://td2.info.pl/" target="_blank">
              Train Driver 2
            </a>
            , where I actively participate as a developer. In my projects, I value simplicity and functionality. I aim for my tools to be
            user-friendly and accessible to everyone. I often stick to solutions I am used to work with, but I'm not afraid to change them in order to
            make my projects better and more efficient. I enjoy exploring and testing new technologies and I have no trouble adapting to them.
          </p>
        </div>
      </div>

      <div className="about-stats">
        <div className="stat-item">
          <h1>
            <FaStar />
            <div>Pasjonat programowania</div>
          </h1>
          <p>od 9 lat</p>
        </div>

        <div className="stat-item">
          <h1>
            <FaUserGraduate />
            <div>Wykształcenie</div>
          </h1>
          <p>wyższe - absolwent informatyki</p>
        </div>

        <div className="stat-item">
          <h1>
            <FaHeart />
            <div>Ulubione technologie</div>
          </h1>
          <p>Vue.js, Typescript</p>
        </div>

        <div className="stat-item">
          <h1>
            <FaBriefcase />
            <div>Zaawansowanie zawodowe</div>
          </h1>
          <p>junior</p>
        </div>
      </div>
    </StyledAbout>
  );
}

export default AboutSection;