"use client";
import { useTranslations } from "next-intl";
import Image from "next/image";
import React, { useEffect, useState } from "react";
import { ChevronLeftIcon, ChevronRightIcon } from "../icons";

const images = [
  "/landing-1.jpg",
  "/landing-2.jpg",
  "/landing-3.jpg",
  "/landing-4.jpg",
];

export default function BannerHumas() {
  const t = useTranslations("Banner");
  const [currentIndex, setCurrentIndex] = useState(0);
  const [resetTimer, setResetTimer] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length);
    }, 25000);

    return () => clearInterval(interval);
  }, [resetTimer]);
  const nextImage = () => {
    setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length);
    setResetTimer((prev) => prev + 1);
  };

  const prevImage = () => {
    setCurrentIndex(
      (prevIndex) => (prevIndex - 1 + images.length) % images.length
    );
    setResetTimer((prev) => prev + 1);
  };

  return (
    <div className="h-fit relative text-gray-300 dark:text-white lg:mt-[-130px] overflow-hidden">
      <div
        className="flex w-full h-[78vh] lg:h-[95vh] transition-transform duration-700 ease-in-out"
        style={{ transform: `translateX(-${currentIndex * 100}%)` }}
      >
        {images.map((img, index) => (
          <div key={index} className="w-full shrink-0">
            <Image
              src={img}
              width={1440}
              height={1080}
              alt={`humasbanner-${index}`}
              className="w-full h-full object-cover opacity-[100] dark:opacity-70"
            />
          </div>
        ))}
      </div>
      <div className="absolute lg:mt-[50px] top-1/2 left-1/2  transform -translate-x-1/2 -translate-y-1/2 text-center w-full lg:w-[75%]">
        <p className="text-[30px] lg:text-[42px] lg:leading-10 font-bold pb-1 md:pb-5">
          {t("jumbotron")}
        </p>
        <p className="text-xs md:text-medium">{`"${t("phrase")}"`}</p>
      </div>
      <button
        onClick={prevImage}
        className="absolute left-4 top-1/2 transform -translate-y-1/2 bg-black/50 text-white px-2 py-2 rounded-full hover:bg-black/70 transition"
      >
        <ChevronLeftIcon />
      </button>
      <button
        onClick={nextImage}
        className="absolute right-4 top-1/2 transform -translate-y-1/2 bg-black/50 text-white px-2 py-2 rounded-full hover:bg-black/70 transition"
      >
        <ChevronRightIcon />
      </button>
    </div>
  );
}