"use client"

import { useRouter } from "next/navigation"
import { Navbar } from "@/components/dashboard/navbar"
import { ProcedureForm } from "@/components/dashboard/procedures/ProcedureForm"

export default function CreateProcedurePage() {
  const router = useRouter()

  return (
    <>
      <Navbar
        title="Create Procedure"
        breadcrumbs={[
          { label: "Dashboard", href: "/dashboard" },
          { label: "Procedures", href: "/dashboard/procedures" },
          { label: "Create" },
        ]}
      />
      <div className="p-6 flex flex-col gap-6">
        <p className="text-muted-foreground text-sm font-sans">
          Only the URL slug is required; you can complete other sections whenever you are ready.
        </p>
        <ProcedureForm
          cancelHref="/dashboard/procedures"
          onSuccess={() => router.push("/dashboard/procedures")}
        />
      </div>
    </>
  )
}