import React from 'react';

// A learning path rendered as a quiet vertical journey to the target role.
export default function CareerJourney({ path, completedIds = [] }) {
  const steps = path.steps || [];
  const target = path.target_role || path.name;
  const allDone = steps.length > 0 && steps.every((s) => completedIds.has(s.course_id));
  const rungs = [
    ...steps.map((s, i) => ({
      label: s.course_title || `Step ${i + 1}`,
      done: completedIds.has(s.course_id),
    })),
    { label: target, done: allDone, isTarget: true },
  ];
  const doneCount = steps.filter((s) => completedIds.has(s.course_id)).length;
  const pct = steps.length ? Math.round((doneCount / steps.length) * 100) : 0;

  return (
    <div className="py-6">
      <div className="flex items-baseline justify-between mb-5">
        <h3 className="text-[17px] font-semibold text-[#0F172A]">{path.name}</h3>
        <span className="text-[13px] text-[#64748B]">{pct}%</span>
      </div>
      {path.description && <p className="text-[13px] text-[#64748B] mb-4">{path.description}</p>}
      <div className="relative pl-6">
        <div className="absolute left-[7px] top-2 bottom-2 w-px bg-[#E2E8F0]" />
        {rungs.map((r, i) => (
          <div key={i} className="relative flex items-center gap-3 py-2">
            <div
              className={`absolute -left-6 w-3.5 h-3.5 rounded-full ${
                r.done ? 'bg-[#0838E0]' : 'bg-white border-2 border-[#E2E8F0]'
              }`}
            />
            <span
              className={`text-[15px] ${
                r.isTarget
                  ? 'font-semibold text-[#0838E0]'
                  : r.done
                  ? 'text-[#0F172A] font-medium'
                  : 'text-[#64748B]'
              }`}
            >
              {r.label}
            </span>
          </div>
        ))}
      </div>
    </div>
  );
}