src/components/features/SurveyComponents.tsx

'use client';

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

interface LevelIndicatorProps {
  level: string;
  content: string[];
  isActive: boolean;
  onClick?: () => void;
}

/**
 * Used in SurveyView to show Level descriptions.
 */
export function LevelIndicator({ level, content, isActive, onClick }: LevelIndicatorProps) {
  const activeClasses = 'bg-cyan-50/80 border-cyan-400 ring-2 ring-cyan-100 shadow-sm transform scale-[1.01] z-10 relative';
  const inactiveClasses = 'bg-slate-50 border-slate-200 hover:bg-white hover:border-cyan-200 cursor-pointer opacity-95 hover:opacity-100';

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

  const labelClasses = isActive ? 'text-cyan-700' : 'text-slate-500';

  return (
    <button
      onClick={onClick}
      className={`w-full text-left flex flex-col sm:flex-row sm:items-stretch rounded-2xl border transition-all duration-300 overflow-hidden ${isActive ? activeClasses : inactiveClasses}`}
    >
      {/* Top Section (Mobile) / Left Section (Desktop) */}
      <div className={`w-full sm:w-[4.5rem] flex-shrink-0 flex items-center justify-center py-1.5 sm:py-0 border-b sm:border-b-0 sm:border-r border-slate-200/50 transition-colors duration-300 ${isActive ? 'bg-cyan-100/70' : 'bg-slate-100/60'}`}>
        <span className={`text-[11px] sm:text-xl font-bold uppercase tracking-widest sm:pl-[0.1em] ${labelClasses}`}>
          {level}
        </span>
      </div>

      {/* Right Section (Reduced padding and line height) */}
      <div className={`flex-grow p-4 sm:p-5 space-y-2 sm:space-y-2.5 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.5">
            <span className={`mt-[7px] w-1.5 h-1.5 rounded-full shrink-0 transition-colors duration-300 ${isActive ? dotActiveClasses : dotInactiveClasses}`} />
            <p className="text-[14px] sm:text-[15px] leading-snug sm:leading-snug break-keep tracking-tight">
              {item}
            </p>
          </div>
        ))}
      </div>
    </button>
  );
}