import type {FunctionComponent} from 'react'
import Meeting from '@/app/(authenticated)/meetings/meeting'
import AddMeetingForm from '@/app/(authenticated)/meetings/meetingForm'
import PageTitle from '@/components/custom/pageTitle'
import {Separator} from '@/components/ui/separator'
import {getMeetings} from '@/dal/meetings'
import {getContacts} from '@/dal/contacts'

const MeetingsPage: FunctionComponent = async () => {
  const [meetings, contacts] = await Promise.all([getMeetings(), getContacts()])

  return (
    <>
      <div className="flex justify-between items-center mb-6">
        <PageTitle>My meetings</PageTitle>
      </div>

      <AddMeetingForm contacts={contacts} />

      <Separator />

      <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4 my-4 pb-20">
        {meetings.map(m => (
          <Meeting {...m} key={m.id} />
        ))}
      </div>
    </>
  )
}

export default MeetingsPage
