import React from "react";
import "./about.style.scss";

import { useTranslation } from "react-i18next";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";

import Rocket from "../../assets/images/main/about-us/rocket.png";

const About = () => {
  const { t } = useTranslation();

  return (
    <div className="about-us container">
      <div>
        <img src={Rocket} alt="" />
      </div>
      <div>
        <h5>{t("about_us.sub_title")}</h5>
        <p className="text">{t("about_us.text")}</p>

        <Swiper
          loop={false}
          // centeredSlides={true}
          slideToClickedSlide={true}
          spaceBetween={0}
          slidesPerView={2}
          onSlideChange={() => console.log("slide change")}
          onSwiper={(swiper) => console.log(swiper)}
          className={"stats"}
        >
          <SwiperSlide>
            <h4>30+</h4>
            <p>Completed projects</p>
          </SwiperSlide>
          <SwiperSlide>
            <h4>400+</h4>
            <p>Web Pages created</p>
          </SwiperSlide>
          <SwiperSlide>
            <h4>6+</h4>
            <p>Years experiance</p>
          </SwiperSlide>
        </Swiper>

        <div className="stats">
          <div>
            <h4>{t("about_us.amount_completed")}</h4>
            <p>{t("about_us.completed")}</p>
          </div>
          <div>
            <h4>{t("about_us.amount_webpages")}</h4>
            <p>{t("about_us.webpages")}</p>
          </div>
          <div>
            <h4>{t("about_us.amount_experiance")}</h4>
            <p>{t("about_us.experiance")}</p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default About;
