'use client';

/**
 * @license
 * SPDX-License-Identifier: Apache-2.0
 */

interface LevelIndicatorProps {
  level: number;
  content: string[];
  isActive: boolean;
  type: 'base' | 'expert';
}

/**
 * Used in SurveyView to show Level 2 and Level 4 descriptions.
 */
export function LevelIndicator({ level, content, isActive }: LevelIndicatorProps) {
  const activeClasses = 'bg-cyan-50 border-cyan-300 ring-4 ring-cyan-50';
  const inactiveClasses = 'bg-slate-50 border-slate-200';

  const dotActiveClasses = 'bg-cyan-600';
  const dotInactiveClasses = 'bg-slate-400';

  const labelClasses = 'text-cyan-700';

  return (
    <div className={`px-5 sm:px-8 py-5 rounded-3xl border transition-all duration-300 ${isActive ? activeClasses : inactiveClasses}`}>
      <div className="flex items-center justify-center space-x-2 mb-4">
        <span className={`text-[16px] font-bold uppercase tracking-widest ${labelClasses}`}>
          {level}수준
        </span>
      </div>
      <div className={`space-y-3 transition-colors duration-300 ${isActive ? 'text-cyan-900 font-medium' : 'text-slate-800 font-normal'}`}>
        {content.map((item, index) => (
          <div key={index} className="flex items-start space-x-2">
            <span className={`mt-1.5 w-1 h-1 rounded-full shrink-0 transition-colors duration-300 ${isActive ? dotActiveClasses : dotInactiveClasses}`} />
            <p className="text-sm md:text-base leading-relaxed break-keep">
              {item}
            </p>
          </div>
        ))}
      </div>
    </div>
  );
}