import { fetchUpcomingOccurrences } from '@/fetch/eventOccurrences'
import { Title } from '@/components/Title/Title'
import { Events } from '@/compositions/Events/Events'
import { transformOccurrences } from '@/utils/dto/events'

type GroupEventsType = {
  id: string;
}

export const GroupEvents = async ({id}: GroupEventsType) => {

  const events = await fetchUpcomingOccurrences({groupId: id})

  return (

    <>
      <Title
        title={"Veranstaltungen"}
        size={"md"}
        color={"contrast"}
      />

      { events && events.docs.length > 0 &&
      <>
        <Events
          events={transformOccurrences(events.docs)}
          n={3}
          schema={"contrast"}
        />
      </>
    }

      {
        events && events.docs.length == 0 &&
        <div>
          Keine Veranstaltungen gefunden.
        </div>
      }
    </>
  )
}