import React from 'react';

interface IndicatorDotsProps {
  /**
   * 전체 인디케이터(dot)의 개수
   * 예: 이미지 개수, 슬라이드 개수 등
   */
  count: number;

  /**
   * 현재 활성화된 인디케이터의 인덱스
   * 예: 현재 보이는 이미지나 슬라이드의 순번
   */
  activeIndex: number;

  /**
   * 인디케이터(dot)를 클릭했을 때 호출되는 콜백 함수
   * 클릭된 인덱스가 인자로 전달됨
   */
  onClick: (index: number) => void;

  /**
   * 인디케이터를 감싸는 최상위 div의 추가 클래스명
   * 위치 조정 등 외부 스타일을 조정할 때 사용
   */
  className?: string;
}

/**
 * 범용 인디케이터(Dots) 컴포넌트
 * - 사용자가 현재 보고 있는 항목을 시각적으로 표시하며
 * - 클릭 시 해당 항목으로 이동하는 기능을 제공함
 */
const IndicatorDots: React.FC<IndicatorDotsProps> = ({count, activeIndex, onClick, className = '',}) => {
  return (
    <div className={`inline-flex gap-2 ${className}`}>
      {Array.from({length: count}).map((_, index) => (
        <div
          key={index}
          onClick={() => onClick(index)}
          className={`w-2 h-2 relative select-none ${
            index === activeIndex ? 'bg-white' : 'bg-white/50'
          } rounded cursor-pointer`}
        />
      ))}
    </div>
  );
};

export default IndicatorDots;
