import React, { useState, useRef, useEffect } from "react";
import Link from "next/link";
import Image from "next/image";
import styles from "../css/SlidingGallery.module.css";

const views = [
  {
    id: "1",
    content: (
      <Link
        href="https://www.facebook.com/share/g/15jdqESvWV/?mibextid=wwXIfr"
        className={styles.link}
      >
        <div className={styles.facebook}>
          <div className={styles.textView}>
            <h3 className={styles.facebookOne}>Meet, Share, and Learn!</h3>
            <p className={styles.facebookTwo}>Join Facebook Community</p>
          </div>
          <div className={styles.logoView}>
            <Image
              src="/images/static/facebook-logo.png"
              alt="Facebook Logo"
              width={120}
              height={120}
            />
          </div>
        </div>
      </Link>
    ),
  },
];

const SlidingGallery = () => {
  const [activeIdx, setActiveIdx] = useState(0);
  const scrollRef = useRef(null);

  const handleScroll = (event) => {
    const scrollLeft = event.target.scrollLeft;
    const slideWidth = event.target.clientWidth;
    const index = Math.round(scrollLeft / slideWidth);
    setActiveIdx(index);
  };

  return (
    <div className={styles.gallery}>
      <div
        className={styles.scrollContainer}
        ref={scrollRef}
        onScroll={handleScroll}
      >
        {views.map((item) => (
          <div key={item.id} className={styles.slide}>
            {item.content}
          </div>
        ))}
      </div>
      <div className={styles.pagination}>
        {views.map((_, index) => (
          <div
            key={index}
            className={`${styles.dot} ${
              activeIdx === index ? styles.activeDot : styles.inactiveDot
            }`}
          />
        ))}
      </div>
    </div>
  );
};

export default SlidingGallery;