"use client";

import { useRef, useState, useEffect } from 'react';
import { ChevronLeft, ChevronRight } from 'lucide-react';

interface HorizontalCarouselProps {
    children: React.ReactNode;
    className?: string; // For additional container styling if needed
}

export default function HorizontalCarousel({ children, className = '' }: HorizontalCarouselProps) {
    const scrollRef = useRef<HTMLDivElement>(null);
    const [showLeft, setShowLeft] = useState(false);
    const [showRight, setShowRight] = useState(true);

    const checkScroll = () => {
        if (!scrollRef.current) return;
        const { scrollLeft, scrollWidth, clientWidth } = scrollRef.current;
        setShowLeft(scrollLeft > 0);
        setShowRight(scrollLeft < scrollWidth - clientWidth - 5); // 5px buffer
    };

    useEffect(() => {
        checkScroll();
        window.addEventListener('resize', checkScroll);
        return () => window.removeEventListener('resize', checkScroll);
    }, []);

    const scroll = (direction: 'left' | 'right') => {
        if (!scrollRef.current) return;

        const scrollAmount = Math.min(scrollRef.current.clientWidth * 0.75, 400); // Scroll 75% of view or max 400px
        const newLeft = direction === 'left'
            ? scrollRef.current.scrollLeft - scrollAmount
            : scrollRef.current.scrollLeft + scrollAmount;

        scrollRef.current.scrollTo({
            left: newLeft,
            behavior: 'smooth'
        });
    };

    return (
        <div className={`relative group/carousel w-fit mx-auto max-w-full ${className}`}>
            {/* Left Button */}
            {showLeft && (
                <button
                    onClick={() => scroll('left')}
                    className="absolute left-0 top-1/2 -translate-y-1/2 -ml-4 z-10 
                               bg-white/80 dark:bg-black/80 hover:bg-white dark:hover:bg-black
                               text-gray-800 dark:text-white
                               rounded-full p-2 shadow-lg backdrop-blur-sm border border-gray-100 dark:border-gray-800
                               transition-all duration-200 opacity-0 group-hover/carousel:opacity-100
                               hidden md:flex items-center justify-center"
                    aria-label="Scroll left"
                >
                    <ChevronLeft size={24} />
                </button>
            )}

            {/* Scroll Container */}
            <div
                ref={scrollRef}
                onScroll={checkScroll}
                className="flex gap-4 overflow-x-auto pb-6 scrollbar-hide snap-x scroll-smooth px-1"
            >
                {children}
            </div>

            {/* Right Button */}
            {showRight && (
                <button
                    onClick={() => scroll('right')}
                    className="absolute right-0 top-1/2 -translate-y-1/2 -mr-4 z-10 
                               bg-white/80 dark:bg-black/80 hover:bg-white dark:hover:bg-black
                               text-gray-800 dark:text-white
                               rounded-full p-2 shadow-lg backdrop-blur-sm border border-gray-100 dark:border-gray-800
                               transition-all duration-200 opacity-0 group-hover/carousel:opacity-100
                               hidden md:flex items-center justify-center"
                    aria-label="Scroll right"
                >
                    <ChevronRight size={24} />
                </button>
            )}
        </div>
    );
}
