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

import { Link } from 'react-router'

import { request as req } from '@repo/util/request'
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator
} from '@repo/ui/components/ui/breadcrumb'

export function meta() {
  return [
    {
      title: 'Detalhes do pagamento'
    }
  ]
}

export async function loader({ params, request, context }: Route.LoaderArgs) {
  const r = await req({
    url: `/orders/${params.id}`,
    request,
    context
  })

  if (!r.ok) {
    throw new Response(null, { status: r.status })
  }

  return { order: await r.json() }
}

export default function Route({ loaderData: { order } }: Route.ComponentProps) {
  return (
    <div className="space-y-2.5">
      <Breadcrumb>
        <BreadcrumbList>
          <BreadcrumbItem>
            <BreadcrumbLink asChild>
              <Link to="../payments">Pagamentos</Link>
            </BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbItem>
            <BreadcrumbPage>Detalhes do pagamento</BreadcrumbPage>
          </BreadcrumbItem>
        </BreadcrumbList>
      </Breadcrumb>
      <pre>{JSON.stringify(order, null, 2)}</pre>
    </div>
  )
}