import { Check } from 'lucide-react';
import PropTypes from 'prop-types';

// Displays a horizontal step trail — Windows wizard style.
// currentStep is 1-based (matches the step numbers sent by the activity).
// 0 = not started.
export default function TrilhaPassos({ passos, currentStep, completed }) {
  return (
    <div className="flex items-center gap-0 border-b border-white/20 px-6 py-3 overflow-x-auto">
      {passos.map((passo, idx) => {
        const stepNum   = idx + 1;
        const isDone    = completed || stepNum < currentStep;
        const isActive  = !completed && stepNum === currentStep;

        return (
          <div key={passo.id} className="flex items-center">
            {/* step circle */}
            <div className="flex flex-col items-center gap-1 min-w-[80px]">
              <div
                className={[
                  'w-9 h-9 rounded-full flex items-center justify-center border-2 font-bold text-sm transition-colors',
                  isDone
                    ? 'bg-green-600 border-green-600 text-white'
                    : isActive
                    ? 'bg-brand-500 border-brand-500 text-white'
                    : 'bg-white border-gray-400 text-gray-400',
                ].join(' ')}
              >
                {isDone ? <Check className="w-4 h-4" /> : stepNum}
              </div>
              <span
                className={[
                  'text-xs text-center leading-tight whitespace-nowrap',
                  isDone ? 'text-green-700 font-medium' : isActive ? 'text-brand-500 font-semibold' : 'text-gray-400',
                ].join(' ')}
              >
                {passo.label}
              </span>
            </div>

            {/* connector */}
            {idx < passos.length - 1 && (
              <div
                className={[
                  'h-0.5 w-8 mx-1 mb-5 flex-shrink-0 transition-colors',
                  isDone ? 'bg-green-500' : 'bg-gray-300',
                ].join(' ')}
              />
            )}
          </div>
        );
      })}
    </div>
  );
}

TrilhaPassos.propTypes = {
  passos:      PropTypes.arrayOf(PropTypes.shape({ id: PropTypes.number, label: PropTypes.string })).isRequired,
  currentStep: PropTypes.number.isRequired,
  completed:   PropTypes.bool,
};

TrilhaPassos.defaultProps = { completed: false };
