import React from 'react';
import { Link } from 'react-router-dom';
import { ArrowRight, Route } from 'lucide-react';

export default function LearningPathCard({ path, completedIds = [] }) {
  const steps = path.steps || [];
  const done = steps.filter(s => completedIds.has(s.course_id)).length;
  const pct = steps.length ? Math.round((done / steps.length) * 100) : 0;
  return (
    <Link to="/university" className="block bg-white border border-[#E5E7EB] rounded-xl p-5 hover:border-[#0A39DF] hover:shadow-sm transition-all">
      <div className="flex items-center gap-2 mb-1">
        <div className="w-8 h-8 rounded-lg bg-[#0A39DF] flex items-center justify-center shrink-0"><Route className="w-4 h-4 text-white" /></div>
        <h3 className="font-semibold text-[#111827] text-[15px]">{path.name}</h3>
      </div>
      <p className="text-[12px] text-[#6B7280] mb-3">{path.description || `Career track to ${path.target_role || path.name}`}</p>
      <div className="flex flex-wrap items-center gap-1.5 mb-3">
        {steps.flatMap((s, i) => [
          <span key={`s${i}`} className={`text-[11px] px-2 py-0.5 rounded-full ${completedIds.has(s.course_id) ? 'bg-[#F0FDF4] text-[#166534]' : 'bg-[#F3F4F6] text-[#6B7280]'}`}>{s.course_title || `Step ${i + 1}`}</span>,
          i < steps.length - 1 ? <ArrowRight key={`a${i}`} className="w-3 h-3 text-[#D1D5DB]" /> : null,
        ])}
      </div>
      <div className="flex items-center gap-2">
        <div className="flex-1 h-2 rounded-full bg-[#F3F4F6] overflow-hidden"><div className="h-full bg-[#0A39DF]" style={{ width: `${pct}%` }} /></div>
        <span className="text-[11px] font-medium text-[#6B7280]">{done}/{steps.length}</span>
      </div>
    </Link>
  );
}