import { getPayload } from 'payload'
import configPromise from '@payload-config'
import { notFound } from 'next/navigation'
import { Section } from '@/components/ui/section'
import { BookingContent } from '@/components/pages/Booking/BookingContent'
import { Vehicle } from '@/lib/types/api/vehicle'
import { customFetch } from '@/lib/utils/apiClient'

interface Props {
  params: { id: string }
}

export default async function BookingPage({ params }: Props) {
  const payload = await getPayload({ config: configPromise })
  const { id } = await params

  let carData: Vehicle | null = null
  let bookingData: any = null
  try {
    const car = await customFetch(`https://api.rentsyst.com/v2/vehicle/${id}`, true, 'GET')
    carData = await car.json()
  } catch {
    console.error('Failed to fetch vehicle from rentsyst API')
  }

  if (!carData) return notFound()

  try {
    const booking = await customFetch(`https://api.rentsyst.com/v2/booking/busy-dates?vehicle_id=${id}`, true, 'GET')
    bookingData = await booking.json()
  } catch {
    console.error('Failed to fetch booking dates from rentsyst API')
  }

  return (
    <Section sectionClass="py-12">
      <BookingContent {...carData} booking={bookingData} />
    </Section>
  )
}
