// Dashboard/Courses/CourseDetail.jsx
function CourseDetail({ courseId, onBack }) {
  const [course, setCourse] = React.useState(null);

  React.useEffect(() => {
    if (!courseId) return;
    fetch("Dashboard/Courses/courses.json")
      .then((r) => r.json())
      .then((data) => {
        const found = data.find((c) => c.id === courseId);
        setCourse(found || null);
      })
      .catch(() => setCourse(null));
  }, [courseId]);

  if (!course) {
    return (
      <div className="card">
        <button className="btn ghost" onClick={onBack}>← Назад</button>
        <p className="muted">Курс не найден</p>
      </div>
    );
  }

  return (
    <div className="card">
      <button className="btn ghost" onClick={onBack}>← Назад</button>
      <h3>{course.title}</h3>
      <div className="muted">{course.author} · {course.duration}</div>
      <p style={{ marginTop: 12 }}>{course.summary}</p>

      <h4 style={{ marginTop: 16 }}>Содержание</h4>
      <ul>
        <li>Введение</li>
        <li>Теория</li>
        <li>Практические задания</li>
        <li>Тест</li>
      </ul>

      <div style={{ marginTop: 12 }}>
        <button className="btn primary" onClick={() => alert("Начать курс (заглушка)")}>Начать</button>
        <button className="btn ghost" style={{ marginLeft: 8 }} onClick={() => alert("Скачать материалы (заглушка)")}>Скачать</button>
      </div>
    </div>
  );
}