import type { StudentTopic } from '../../types'

interface Props {
  topic: StudentTopic
  onStart: (topic: StudentTopic) => void
}

export default function TopicChip({ topic, onStart }: Props) {
  return (
    <div className="bg-gray-900 border border-gray-800 rounded-xl px-5 py-4 flex items-center justify-between">
      <div>
        <p className="text-white font-medium">{topic.name}</p>
        <p className="text-gray-500 text-xs mt-0.5">Topic {topic.order_index + 1}</p>
      </div>
      <button
        onClick={() => onStart(topic)}
        className="bg-indigo-600 hover:bg-indigo-500 text-white text-sm font-medium px-4 py-1.5 rounded-lg transition-colors"
      >
        Start
      </button>
    </div>
  )
}