import React from 'react'
import {
  VStack,
  HStack,
  Box,
  Text,
  Badge,
  Tooltip
} from '@chakra-ui/react'
import { useTranslation } from 'react-i18next'
import { CheckCircleIcon } from '@chakra-ui/icons'

interface CourseAttendanceProps {
  courses: Array<{id: string, name: string, attendanceRate: number}>
}

export const CourseAttendanceList: React.FC<CourseAttendanceProps> = ({ courses }) => {
  const { t } = useTranslation()
  
  // Определяем цвет для прогресса в зависимости от значения
  const getProgressColor = (value: number) => {
    if (value > 80) return 'green'
    if (value > 50) return 'blue'
    if (value > 30) return 'yellow'
    return 'red'
  }
  
  if (!courses?.length) {
    return (
      <Text color="gray.500" fontSize="sm" textAlign="center">
        {t('journal.pl.overview.noAttendanceData')}
      </Text>
    )
  }
  
  return (
    <Box>
      <Text fontWeight="medium" fontSize="sm" mb={2} display="flex" alignItems="center">
        <CheckCircleIcon color="green.400" mr={2} />
        {t('journal.pl.overview.topAttendanceCourses')}
      </Text>
      
      <VStack align="stretch" spacing={2}>
        {courses.map((course, index) => (
          <HStack key={course.id} spacing={2}>
            <Badge 
              colorScheme={['green', 'blue', 'yellow'][index]} 
              borderRadius="full" 
              minW="22px" 
              textAlign="center"
            >
              #{index + 1}
            </Badge>
            <Tooltip label={course.name}>
              <Text fontSize="sm" fontWeight="medium" isTruncated flex="1">
                {course.name}
              </Text>
            </Tooltip>
            <Badge 
              colorScheme={getProgressColor(course.attendanceRate)}
              variant="solid"
              px={2}
            >
              {Math.round(course.attendanceRate)}%
            </Badge>
          </HStack>
        ))}
      </VStack>
      
      <Text fontSize="xs" color="gray.500" mt={2} fontStyle="italic">
        {t('journal.pl.overview.attendanceHelp')}
      </Text>
    </Box>
  )
} 