'use client'

import dynamic from 'next/dynamic'
import { Suspense } from 'react'

import PageNavbar from '@/components/layouts/PageNavbar'
import { DetailSkeleton } from '@/components/feedback/LoadingState'

const EventCreateWizard = dynamic(() => import('@/components/events/create/EventCreateWizard'), {
  ssr: false,
  loading: () => <DetailSkeleton />,
})

const AdminEventCreate = () => {
  return (
    <section className="h-full w-full">
      <PageNavbar pageTitle="ایجاد رویداد جدید" />
      <div className="admin-page-container">
        <Suspense fallback={<DetailSkeleton />}>
          <EventCreateWizard />
        </Suspense>
      </div>
    </section>
  )
}

export default AdminEventCreate