import React from "react";
import Image from "next/image";
import { useTranslation } from "next-i18next";

import Carousel from "../../containers/carousel";
import styles from "./ProjectPictures.module.scss";

const ProjectPictures = ({ data }: any) => {
  const { t } = useTranslation("common");

  return (
    <article className={styles.projectPictures}>
      <h2 className="mb-8">{t("Project pictures")}</h2>

      <Carousel
        items={data}
        slidesPerView={1}
        spaceBetween={50}
        pagination={{ clickable: true }}
        breakpoints={{
          320: {
            slidesPerView: 1,
          },
          640: {
            slidesPerView: 2,
          },
          1024: {
            slidesPerView: 4,
          },
        }}
      >
        {({ image }: any) => (
          <div className="pb-22">
            <div className="project-picture relative">
              <Image src={image} alt="" fill quality={100} />
            </div>
          </div>
        )}
      </Carousel>
    </article>
  );
};

export default ProjectPictures;