import React from 'react'
import { Box, Flex, Heading, Divider, VStack } from '@chakra-ui/react'
import { Course } from '../../../__data__/model'
import { CourseCard } from '../course-card'

interface YearGroupProps {
  year: string
  courses: Course[]
  colorMode: string
}

/**
 * Компонент для отображения курсов одного года
 */
export const YearGroup = ({ year, courses, colorMode }: YearGroupProps) => {
  return (
    <Box mb={6}>
      <Flex align="center" mb={3}>
        <Heading size="md" color={colorMode === 'dark' ? 'blue.300' : 'blue.600'}>
          {year}
        </Heading>
        <Divider ml={4} flex="1" />
      </Flex>
      <VStack as="ul" align="stretch" spacing={{ base: 3, md: 4 }}>
        {courses.map((course) => (
          <CourseCard
            key={course.id}
            course={course}
          />
        ))}
      </VStack>
    </Box>
  )
}