/**
 * Carousel Component - React Wrapper for Vendor JS
 * 
 * @vendor-dependency @vendor-web/js/patterns/carousel.js
 * @cleanup-status ✅ Implemented with useEffect cleanup
 */

import React, { useRef, useEffect, ReactNode } from 'react';
import { carousel } from '@vendor-web/js/patterns/carousel.js';

interface CarouselProps {
  children: ReactNode;
  className?: string;
}

export const Carousel: React.FC<CarouselProps> = ({ children, className }) => {
  const carouselRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!carouselRef.current) return;

    // 初始化廠商 carousel
    const cleanup = carousel(carouselRef.current);

    // Cleanup 函數：當元件卸載時清理資源
    return () => {
      if (typeof cleanup === 'function') {
        cleanup();
      }
    };
  }, []);

  return (
    <div 
      ref={carouselRef}
      className={`carousel ${className || ''}`}
    >
      <div className="carousel-container">
        <div className="carousel-scrollContainer">
          <div className="carousel-list">
            {children}
          </div>
        </div>
      </div>
      <nav className="carousel-controlContainer">
        <button 
          type="button" 
          className="button button--icon carousel-control carousel-control--prev"
        >
          <i className="icon-arrowLeft"></i>
        </button>
        <button 
          type="button" 
          className="button button--icon carousel-control carousel-control--next"
        >
          <i className="icon-arrowRight"></i>
        </button>
      </nav>
    </div>
  );
};