"use client";
import { Card } from "@/components/ui/Card";

const courses = [
  { id: "c1", title: "React 19 完全指南", instructor: "张老师", price: 199, cover: "📘" },
  { id: "c2", title: "TypeScript 高级编程", instructor: "李老师", price: 149, cover: "📙" },
  { id: "c3", title: "Node.js 后端实战", instructor: "王老师", price: 249, cover: "📗" },
];

export default function CoursePage() {
  return (
    <div className="space-y-4">
      <h1 className="text-xl font-bold text-gray-800">课程中心</h1>
      {courses.map(c => (
        <Card key={c.id} className="flex gap-3">
          <div className="w-20 h-20 rounded-lg bg-gray-100 flex items-center justify-center text-3xl flex-shrink-0">{c.cover}</div>
          <div>
            <h3 className="font-medium text-gray-800">{c.title}</h3>
            <p className="text-xs text-gray-500 mt-1">{c.instructor}</p>
            <p className="text-sm font-bold text-red-500 mt-2">¥{c.price}</p>
          </div>
        </Card>
      ))}
    </div>
  );
}