import React from 'react'
import { AnimatePresence } from 'framer-motion'
import { User, Reaction } from '../../__data__/model'
import { StudentList as StyledStudentList } from '../../pages/style'
import { StudentCard } from './StudentCard'

interface StudentListProps {
  students: (User & { present?: boolean; recentlyPresent?: boolean })[]
  onAddUser: (user: User) => void
  studentReactions: Record<string, Reaction[]>
}

export const StudentList: React.FC<StudentListProps> = ({
  students,
  onAddUser,
  studentReactions
}) => {
  return (
    <StyledStudentList>
      <AnimatePresence initial={false}>
        {students.map((student) => (
          <StudentCard
            key={student.sub}
            student={student}
            onAddUser={onAddUser}
            reaction={studentReactions?.[student.sub]?.[0]}
          />
        ))}
      </AnimatePresence>
    </StyledStudentList>
  )
} 