import React from 'react';

interface LevelTabsProps {
  levels: { id: string; isLocked: boolean; progress?: number }[];
  activeLevel: string;
  onSelectLevel: (level: string) => void;
}

export function LevelTabs({ levels, activeLevel, onSelectLevel }: LevelTabsProps) {
  return (
    <div className="w-full overflow-x-auto pb-2 mb-4 scrollbar-hide">
      <div className="flex gap-2 min-w-max px-6 max-w-5xl mx-auto">
        {levels.map((lvl) => {
          const isActive = activeLevel === lvl.id;
          return (
            <button
              key={lvl.id}
              onClick={() => onSelectLevel(lvl.id)}
              className={`flex items-center gap-2 px-5 py-2.5 rounded-full font-bold text-sm transition-all whitespace-nowrap ${
                isActive 
                  ? 'bg-blue-600 text-white shadow-md' 
                  : lvl.isLocked 
                    ? 'bg-gray-100 text-gray-400 cursor-not-allowed border border-gray-200' 
                    : 'bg-white text-gray-600 hover:bg-gray-50 border border-gray-200'
              }`}
              disabled={lvl.isLocked}
            >
              {lvl.id}
              {lvl.isLocked ? (
                <span className={`opacity-80 ${isActive ? 'text-blue-200' : 'text-gray-400'}`}>🔒</span>
              ) : (
                lvl.progress !== undefined && (
                  <span className={`text-[11px] px-1.5 py-0.5 rounded-full ${isActive ? 'bg-blue-500 text-white' : 'bg-green-100 text-green-700'}`}>
                    ✓{lvl.progress}
                  </span>
                )
              )}
            </button>
          );
        })}
      </div>
    </div>
  );
}