'use client';
 
import { Box, Image, ActionIcon } from '@mantine/core';
import { IconChevronLeft, IconChevronRight } from '@tabler/icons-react';
import { useRef, useState, useEffect } from 'react';
import DICGC from '@/app/image/DICGC_image.jpg';
import objective from '@/app/image/objective.jpg';
import vision from '@/app/image/vision.jpg';
 
export default function CustomCarousel() {
  const scrollRef = useRef<HTMLDivElement>(null);
  const images = [DICGC,vision,objective];
  const [currentIndex, setCurrentIndex] = useState(0);
 
  const scrollToIndex = (index: number) => {
    const container = scrollRef.current;
    if (!container) return;
 
    const slideWidth = container.offsetWidth; // full width per slide
    container.scrollTo({
      left: slideWidth * index,
      behavior: 'smooth',
    });
  };
 
  const scrollRight = () => {
    const nextIndex = (currentIndex + 1) % images.length;
    setCurrentIndex(nextIndex);
    scrollToIndex(nextIndex);
  };
 
  const scrollLeft = () => {
    const prevIndex = (currentIndex - 1 + images.length) % images.length;
    setCurrentIndex(prevIndex);
    scrollToIndex(prevIndex);
  };
 
  useEffect(() => {
    scrollToIndex(currentIndex);
  }, [currentIndex]);
 
  return (
    <Box style={{ position: 'relative', width: '90%', overflow: 'hidden',backgroundColor:"white" }}>
      {/* Scrollable container */}
      <Box
        ref={scrollRef}
        style={{
          display: 'flex',
          overflowX: 'hidden',
          scrollSnapType: 'x mandatory',
          scrollBehavior: 'smooth',
        }}
      >
        {images.map((img, i) => (
          <Box
            key={i}
            style={{
              flex: '0 0 100%',
              scrollSnapAlign: 'start',
              height: '250px',
              minWidth: '100%',
              maxWidth: '100%',
              borderRadius: '8px',
              backgroundColor: 'white',
            }}
          >
            <Image
              src={img.src}
              alt={`Slide ${i + 1}`}
              style={{
                width: '100%',
                height: '100%',
                objectFit: 'contain',
              }}
            />
          </Box>
        ))}
      </Box>
 
      {/* Left Scroll Button */}
      <ActionIcon
        variant="filled"
        color="grey"
        onClick={scrollLeft}
        style={{
          position: 'absolute',
          top: '50%',
          left: '10px',
          transform: 'translateY(-50%)',
          zIndex: 10,
        }}
      >
        <IconChevronLeft size={24} />
      </ActionIcon>
 
      {/* Right Scroll Button */}
      <ActionIcon
        variant="filled"
        color="grey"
        onClick={scrollRight}
        style={{
          position: 'absolute',
          top: '50%',
          right: '10px',
          transform: 'translateY(-50%)',
          zIndex: 10,
        }}
      >
        <IconChevronRight size={24} />
      </ActionIcon>
    </Box>
  );
}
 