import type { Route } from './+types/route'

import { Suspense } from 'react'
import { Await } from 'react-router'

import { Skeleton } from '@repo/ui/components/skeleton'
import { request as req } from '@repo/util/request'

export function meta({}: Route.MetaArgs) {
  return [{ title: 'Matrículas agendadas' }]
}

export async function loader({ context, request, params }: Route.LoaderArgs) {
  const scheduled = req({
    url: `/orgs/${params.orgid}/enrollments/scheduled`,
    context,
    request
  }).then((r) => r.json())

  return {
    scheduled
  }
}

export default function Route({
  loaderData: { scheduled }
}: Route.ComponentProps) {
  return (
    <Suspense fallback={<Skeleton />}>
      <div className="space-y-0.5 mb-8">
        <h1 className="text-2xl font-bold tracking-tight">
          Matrículas agendadas
        </h1>
        <p className="text-muted-foreground">
          Acompanhe todas as matrículas agendadas, cancele quando quiser ou
          matricule imediatamente.
        </p>
      </div>
      <Await resolve={scheduled}>
        {({ items }) =>
          items.map((props, index) => {
            return <div key={index}>{console.log(props)}</div>
          })
        }
      </Await>
    </Suspense>
  )
}
