// CourseCard.jsx

function CourseCard({ course, variant = "recent" }) {
  const { title, tint, lastPracticed, progress, icon } = course;
  const iconColor = {
    amber: "rgb(245,191,79)",
    blue:  "rgb(66,153,234)",
    red:   "rgb(249,111,98)",
    green: "rgb(97,197,84)",
    olive: "rgb(164,177,117)",
  }[tint];
  const iconBg = {
    amber: "rgba(245,191,79,0.15)",
    blue:  "rgba(66,153,234,0.25)",
    red:   "rgba(249,111,98,0.18)",
    green: "rgba(97,197,84,0.20)",
    olive: "rgba(164,177,117,0.20)",
  }[tint];

  return (
    <div className="course-card">
      <div className="course-tile" style={{ background: iconBg, borderColor: iconBg }}>
        <svg viewBox="0 0 24 24" width="24" height="24"
             stroke={iconColor} fill="none" strokeWidth="1.5">
          <path d={icon}/>
        </svg>
      </div>
      <div className="course-body">
        <div className="course-head">
          <div className="course-title">{title}</div>
          <div className="course-meta">
            <span className="dot" />
            Last practiced {lastPracticed}
          </div>
        </div>
        <div className="progress">
          <div className="fill" style={{ width: progress + "%" }} />
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { CourseCard });