const TOPICS = ["Business", "Office", "Travel", "Finance", "HR", "Marketing"]

export function Vocabulary() {
  return (
    <div className="space-y-6">
      <h1 className="text-2xl font-bold">Từ vựng TOEIC</h1>
      <p className="text-gray-600">Chọn chủ đề để học flashcard</p>
      <div className="grid gap-3 grid-cols-2 sm:grid-cols-3">
        {TOPICS.map((topic) => (
          <div key={topic} className="rounded-lg border p-4 text-center cursor-pointer hover:bg-gray-50">
            <span className="font-medium">{topic}</span>
          </div>
        ))}
      </div>
    </div>
  )
}
