import { useNavigate } from 'react-router-dom'
import type { InstructorStudent } from '../../types'

interface Props {
  student: InstructorStudent
}

export default function StudentRow({ student }: Props) {
  const navigate = useNavigate()

  const scoreColor =
    student.avg_score == null
      ? 'text-gray-500'
      : student.avg_score >= 70
        ? 'text-green-400'
        : student.avg_score >= 40
          ? 'text-yellow-400'
          : 'text-red-400'

  return (
    <div className="flex items-center justify-between px-5 py-4 bg-gray-800/50 rounded-lg">
      <div>
        <p className="text-white font-medium">{student.full_name}</p>
        <p className="text-gray-500 text-xs mt-0.5">{student.email}</p>
      </div>
      <div className="flex items-center gap-6">
        <div className="text-center">
          <p className="text-white font-semibold">{student.completed_sessions}</p>
          <p className="text-gray-500 text-xs">Interviews</p>
        </div>
        <div className="text-center">
          <p className={`font-semibold ${scoreColor}`}>
            {student.avg_score ?? '—'}
          </p>
          <p className="text-gray-500 text-xs">Avg score</p>
        </div>
        <button
          onClick={() => navigate(`/instructor/students/${student.id}`)}
          className="text-sm text-indigo-400 hover:text-indigo-300 transition-colors"
        >
          Detail →
        </button>
      </div>
    </div>
  )
}