import React from 'react'
import dayjs from 'dayjs'
import {
  Tr,
  Td,
} from '@chakra-ui/react'

import { Lesson } from '../../../__data__/model'

import { Item } from './item'

type LessonItemProps = {
  date: string
  lessons: Lesson[]
  isTeacher: boolean
  courseId: string
  setlessonToDelete(lesson: Lesson): void
}

export const LessonItems: React.FC<LessonItemProps> = ({
  date,
  lessons,
  isTeacher,
  courseId,
  setlessonToDelete,
}) => (
  <>
    {date && (
      <Tr>
        <Td colSpan={isTeacher ? 5 : 3}>
          {dayjs(date).format('DD MMMM YYYY')}
        </Td>
      </Tr>
    )}
    {lessons.map((lesson) => (
      <Item
        key={lesson.id}
        {...lesson}
        setlessonToDelete={() => setlessonToDelete(lesson)}
        courseId={courseId}
        isTeacher={isTeacher}
      />
    ))}
  </>
)