import React from 'react'
import { Box } from '@chakra-ui/react'
import { useTranslation } from 'react-i18next'
import { formatDate } from '../../utils/dayjs-config'
import { getAttendanceColor } from '../../utils/attendance-colors'

interface AttendanceStatsProps {
  lessonDate: string
  studentsPresent: number
  totalStudents: number
  isLoading: boolean
  isPulsing: boolean
}

export const AttendanceStats: React.FC<AttendanceStatsProps> = ({
  lessonDate,
  studentsPresent,
  totalStudents,
  isLoading,
  isPulsing
}) => {
  const { t } = useTranslation()
  
  const attendanceColors = getAttendanceColor(studentsPresent, totalStudents)
  
  return (
    <Box pb={3}>
      {formatDate(lessonDate, t('journal.pl.lesson.dateFormat'))}{' '}
      {t('journal.pl.common.marked')} - 
      {!isLoading && (
        <Box 
          as="span" 
          px={2} 
          py={1} 
          ml={2}
          borderRadius="md"
          fontWeight="bold"
          bg={attendanceColors.bg}
          color={attendanceColors.color}
          _dark={{ 
            bg: attendanceColors.dark.bg, 
            color: attendanceColors.dark.color
          }}
          position="relative"
          animation={isPulsing ? "pulse 1.5s ease-in-out" : "none"}
          sx={{
            '@keyframes pulse': {
              '0%': { transform: 'scale(1)' },
              '50%': { transform: 'scale(1.15)', boxShadow: '0 0 10px rgba(66, 153, 225, 0.7)' },
              '100%': { transform: 'scale(1)' }
            }
          }}
        >
          {studentsPresent} / {totalStudents}
        </Box>
      )}
      {isLoading && (
        <span> {studentsPresent}</span>
      )}{' '}
      {t('journal.pl.common.people')}
    </Box>
  )
} 