'use client'

import { useState, useEffect } from 'react';

// 🔧 Carousel Config
const desktopConfig = {
  GAP: 300,
  ROT_Y: 18,
  DEPTH: 210,
  SCALE_DROP: 0.12,
};

const mobileConfig = {
  GAP: 110, // Smaller gap for mobile
  ROT_Y: 0,   // Flatter view on mobile
  DEPTH: 150, // Less depth
  SCALE_DROP: 0.1, // Less aggressive scaling
};

export const useResponsiveCarousel = () => {
  const [config, setConfig] = useState(desktopConfig);

  useEffect(() => {
    const checkScreenSize = () => {
      if (window.innerWidth < 768) {
        setConfig(mobileConfig);
      } else {
        setConfig(desktopConfig);
      }
    };

    checkScreenSize();
    window.addEventListener('resize', checkScreenSize);

    return () => window.removeEventListener('resize', checkScreenSize);
  }, []);

  return config;
};