import type { TrainingSet } from '../../types';
import { MUSCLE_GROUP_LABELS, MUSCLE_GROUP_COLORS } from '../../types';

interface SetDetailProps {
  trainingSet: TrainingSet;
}

export function SetDetail({ trainingSet }: SetDetailProps) {
  return (
    <div className="bg-gray-900 border border-gray-800 rounded-xl p-4">
      <h3 className="font-semibold text-gray-100 text-lg mb-3">{trainingSet.name}</h3>
      {(!trainingSet.exercises || trainingSet.exercises.length === 0) ? (
        <p className="text-gray-500 text-sm">Keine Übungen in diesem Set.</p>
      ) : (
        <div className="space-y-2">
          {trainingSet.exercises.map((ex, index) => {
            const label = MUSCLE_GROUP_LABELS[ex.muscle_group] || ex.muscle_group;
            const color = MUSCLE_GROUP_COLORS[ex.muscle_group] || 'bg-gray-600';
            return (
              <div key={ex.id} className="flex items-center gap-3 bg-gray-800 rounded-lg px-3 py-2">
                <span className="text-gray-500 text-sm w-6">{index + 1}.</span>
                <span className="flex-1 text-gray-200">{ex.name}</span>
                <span className={`${color} text-white text-xs px-2 py-1 rounded-full`}>
                  {label}
                </span>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}