import { CheckCircle2 } from 'lucide-react';

export default function OnboardingRoadmap({ priorities = [] }) {
  const priorityList = Array.isArray(priorities) ? priorities : priorities ? [priorities] : [];
  const steps = priorityList.length
    ? priorityList
    : ['Entry point', 'Routing layer', 'Core services', 'Data contracts', 'Tests'];

  return (
    <div className="rounded-lg border border-white/10 bg-white/[0.04] p-5">
      <h3 className="mb-4 text-sm font-semibold text-white">Onboarding Roadmap</h3>
      <div className="space-y-3">
        {steps.slice(0, 8).map((step, index) => (
          <div key={`${step}-${index}`} className="flex gap-3">
            <span className="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-emerald-500/12 text-emerald-200">
              <CheckCircle2 className="h-3.5 w-3.5" />
            </span>
            <div className="min-w-0">
              <p className="path-text font-mono text-xs text-slate-200">{step}</p>
              <p className="text-[11px] text-slate-600">Priority {index + 1}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}