const PARTS = [
  { id: 1, name: "Part 1", desc: "Photographs" },
  { id: 2, name: "Part 2", desc: "Question-Response" },
  { id: 3, name: "Part 3", desc: "Conversations" },
  { id: 4, name: "Part 4", desc: "Short Talks" },
  { id: 5, name: "Part 5", desc: "Incomplete Sentences" },
  { id: 6, name: "Part 6", desc: "Text Completion" },
  { id: 7, name: "Part 7", desc: "Reading Comprehension" },
]

export function ToeicPractice() {
  return (
    <div className="space-y-6">
      <h1 className="text-2xl font-bold">Luyện đề TOEIC</h1>
      <p className="text-gray-600">Chọn Part để bắt đầu luyện tập</p>
      <div className="grid gap-3 sm:grid-cols-2">
        {PARTS.map((part) => (
          <div key={part.id} className="rounded-lg border p-4 cursor-pointer hover:bg-gray-50">
            <div className="font-semibold">{part.name}</div>
            <div className="text-sm text-gray-500">{part.desc}</div>
          </div>
        ))}
      </div>
    </div>
  )
}
