// Dashboard/Courses/CourseCard.jsx
function CourseCard({ course, onOpen }) {
  return (
    <div className="course-card" style={{ display: "flex", justifyContent: "space-between", padding: 12, borderRadius: 8, background: "#0f1724", border: "1px solid #1f2937" }}>
      <div style={{ maxWidth: "72%" }}>
        <div style={{ fontWeight: 700, color: "#e2e8f0" }}>{course.title}</div>
        <div style={{ color: "#94a3b8", fontSize: 13 }}>{course.author} · {course.duration}</div>
        <div style={{ marginTop: 8, color: "#cbd5e1" }}>{course.summary}</div>
      </div>

      <div style={{ display: "flex", flexDirection: "column", gap: 8, alignItems: "flex-end" }}>
        <div style={{ width: 120, height: 8, background: "#0b1220", borderRadius: 6, overflow: "hidden", border: "1px solid #111827" }}>
          <div style={{ height: "100%", width: `${course.progress || 0}%`, background: "linear-gradient(90deg,#34d399,#60a5fa)" }} />
        </div>

        <div style={{ display: "flex", gap: 8 }}>
          <button className="btn small" onClick={() => onOpen && onOpen(course.id)}>Открыть</button>
          <button className="btn small ghost" onClick={() => alert("Записаться на курс (заглушка)")}>Записаться</button>
        </div>
      </div>
    </div>
  );
}