import React from 'react';
import { Link } from 'react-router-dom';
import { BookOpen } from 'lucide-react';

export default function LearnToday({ courses = [] }) {
  const recs = courses.filter((c) => c.status !== 'archived').slice(0, 4);
  return (
    <section className="rounded-2xl bg-white border border-[#E5E7EB] p-6 sm:p-8">
      <h2 className="text-[18px] font-bold text-[#0F172A]">Learn</h2>
      <p className="text-[13px] text-[#6B7280] mb-5">Micro-learning. 5-minute lessons. Learning increases value immediately.</p>
      {recs.length === 0 ? (
        <p className="text-[13px] text-[#6B7280]">No recommendations yet.</p>
      ) : (
        <div className="space-y-2">
          {recs.map((c) => (
            <Link key={c.id} to={`/university/${c.id}`} className="flex items-center justify-between gap-3 p-3 rounded-xl hover:bg-[#F9FAFB] border border-transparent hover:border-[#E5E7EB] transition-colors">
              <div className="flex items-center gap-3">
                <div className="w-9 h-9 rounded-lg bg-[#EFF6FF] text-[#0A39DF] flex items-center justify-center"><BookOpen className="w-4 h-4" /></div>
                <div>
                  <div className="text-[14px] font-medium text-[#0F172A]">{c.title}</div>
                  <div className="text-[11px] text-[#6B7280]">{c.estimated_minutes} min · {c.category}</div>
                </div>
              </div>
              <span className="text-[12px] font-bold text-[#0A39DF] whitespace-nowrap">+{Math.max(1, Math.round((c.xp || 100) / 20))} Score</span>
            </Link>
          ))}
        </div>
      )}
    </section>
  );
}