// Core packages
import Image from "next/image";

// Section structure
import Section from "../../structure/section";
import Container from "../../structure/container";

// Section general blocks
import SectionTitle from "../../blocks/section.title.block";
import SectionGridBg from "../../blocks/section.grid.block";

// Section specific blocks
import BadgesBlock from "../../blocks/about.badges.block";
import CopyBlock from "../../blocks/about.copy.block";

// Section scss
import about from "../../../styles/sections/index/about.module.scss";
import { IconArrowsExchange, IconBrandBootstrap, IconBrandCss3, IconBrandFigma, IconBrandHtml5, IconBrandJavascript, IconBrandLaravel, IconBrandNextjs, IconBrandNodejs, IconBrandPhp, IconBrandReact, IconBrandTailwind, IconCode, IconDeviceMobile, IconFlame, IconLetterN } from "@tabler/icons-react";

/**
 * Section: About
 * An overview of yourself.
 * Highlight your top level attributes and disciplines.
 *
 * @returns {jsx} <About />
 */
export default function About() {
  return (
    <Section classProp={about.section}>
      <Container spacing={["verticalXXXLrg"]}>
        <SectionTitle
          title="Hakkımda"
          preTitle="ÖZET"
        />
        <section className={about.content}>
          <div className={about.image}>
            <Image width='400' height='400' src="/img/diyarakengin.jpg" alt="Diyar Akengin" />
            {/* <Image src="/img/family-photo.jpg" width={600} height={800}/> */}
          </div>
          <div className={about.copy}>
            <BadgesBlock
              title="Web Tasarım & Kodlama (Full-Stack Dev)"
              containerClass={about.container}
              list={fullStackSkills}
              fullContainer="fullContainer"
              block="techs"
              icon={IconCode}
              copy="Web tasarım ve kodlama alanında tam yetkinliğe sahip bir full-stack geliştirici olarak, estetik ve işlevselliği mükemmel şekilde birleştiriyorum. Modern web teknolojileriyle kullanıcı deneyimini ön planda tutarak, özelleştirilmiş ve etkili çözümler sunuyorum."
              headerIcon={`${about.icon}`}
            />
            <CopyBlock
              title="Mobil Uygulama Geliştirme (Mobile Dev)"
              containerClass={about.container}
              iconClass={about.icon}
              icon={IconDeviceMobile}
              copy="Mobil uygulama geliştirme konusunda uzmanım ve kullanıcı dostu, yüksek performanslı uygulamalar oluşturuyorum. İhtiyacınıza uygun yaratıcı çözümlerle mobil deneyiminizi bir üst seviyeye taşıyorum."
            />
          </div>
        </section>
      </Container>
    </Section>
  );
}

const fullStackSkills = [
  { key: IconBrandHtml5, name: "HTML", type: "fab" },
  { key: IconBrandCss3, name: "CSS", type: "fab" },
  { key: IconBrandJavascript, name: "Javascript", type: "fab" },
  { key: IconBrandBootstrap, name: "Bootstrap", type: "fab" },
  { key: IconBrandTailwind, name: "Tailwind", type: "fad" },
  { key: IconBrandFigma, name: "Figma", type: "fab" },
  { key: IconBrandPhp, name: "PHP", type: "tabler" },
  { key: IconBrandReact, name: "React", type: "fab" },
  { key: IconBrandNextjs, name: "Next", type: "far" },
  { key: IconBrandNodejs, name: "Node.JS", type: "tabler" },
  { key: IconBrandLaravel, name: "Laravel", type: "tabler" },
  { key: IconArrowsExchange, name: "Postman", type: "tabler" },
  { key: IconLetterN, name: "NestJS", type: "tabler" },
  { key: IconFlame, name: "Codeigniter", type: "tabler" },
];