import React from 'react'
import { notFound } from 'next/navigation'
import dynamic from 'next/dynamic'
import { Merchant } from '@/lib/types/merchant'

const CheckReservation = dynamic(
  () => import('@/components/pages/check-reservation'),
)

type Props = {
  params: Promise<{ username: string }>
}

export async function generateMetadata({ params }: Props) {
  const { username } = await params
  const res = await fetch(`${process.env.API_URL}/merchants/${username}`, {
    cache: 'no-store',
  })

  if (!res.ok) {
    notFound()
  }

  const { data: merchant }: { data: Merchant } = await res.json()

  return {
    title: `${merchant.name} | Check Reservation`,
  }
}

const Page: React.FC = async () => {
  return <CheckReservation />
}

export default Page