"use client"

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

export default function EditProcedurePage() {
  const router = useRouter()
  const params = useParams<{ id: string }>()
  const procedureId = params?.id

  return (
    <>
      <Navbar
        title="Edit Procedure"
        breadcrumbs={[
          { label: "Dashboard", href: "/dashboard" },
          { label: "Procedures", href: "/dashboard/procedures" },
          { label: "Edit" },
        ]}
      />
      <div className="p-6">
        <ProcedureForm
          procedureId={procedureId}
          cancelHref="/dashboard/procedures"
          onSuccess={() => router.push("/dashboard/procedures")}
        />
      </div>
    </>
  )
}