import React, { useEffect, useState } from "react";
import Image from "next/image";
import Flickity from "react-flickity-component";
import "flickity/css/flickity.css";
import styles from "./AutoGallery.module.sass";

export class AutoGallery extends React.Component {
  constructor(props) {
    super(props);
    this.state = { activeItem: 1 };
  }

  render() {
    return (
      <Flickity
        className={styles.carousel} // default ''
        elementType={"div"} // default 'div'
        options={{ prevNextButtons: true, wrapAround: true, autoPlay: 5000 }} // takes flickity options {}
        disableImagesLoaded={false} // default false
        reloadOnUpdate // default false
        static // default false
      >
        <div className={styles.slide}>
          <img className={styles.bgimg} src="/portfolio_bath.webp" alt="bath" />
          <div className={styles.overlay}>
            <h2>My Bachelor Thesis</h2>
            <p>on calibration and software inside a custom power supply</p>
            <p>see more...</p>
          </div>
        </div>
        <div className={styles.slide}>
          <img className={styles.bgimg} src="/portfolio_math.webp" alt="math" />
          <div className={styles.overlay}>
            <h2>My Master Thesis</h2>
            <p>
              on analysis, design and optimization of a analogue Pre-Amplifier
              with the goal of transitioning to a newer manufacturing node.
            </p>
            <p>see more...</p>
          </div>
        </div>
      </Flickity>
    );
  }
}