"use client"

import { useRouter } from "next/navigation"
import { Navbar } from "@/components/dashboard/navbar"
import { HospitalForm } from "@/components/dashboard/hospitals/HospitalForm"
import { Building2 } from "lucide-react"

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

  return (
    <>
      <Navbar
        title="Create Hospital"
        breadcrumbs={[
          { label: "Dashboard", href: "/dashboard" },
          { label: "Hospitals", href: "/dashboard/hospitals" },
          { label: "Create" },
        ]}
      />

      <div className="p-6 flex flex-col gap-6">
        <div className="flex items-start justify-between gap-4 flex-wrap">
          <div>
            <div className="flex items-center gap-2.5 mb-1">
              <h1 className="text-2xl font-bold text-foreground font-sans">Create Hospital Profile</h1>
              <span
                className="flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-bold font-sans uppercase tracking-wider"
                style={{
                  background: "rgba(29,45,104,0.08)",
                  color: "var(--brand-navy)",
                  border: "1px solid rgba(29,45,104,0.15)",
                }}
              >
                <Building2 className="w-3 h-3" aria-hidden="true" />
                Hospitals
              </span>
            </div>
            <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>
          </div>
        </div>

        <HospitalForm
          cancelHref="/dashboard/hospitals"
          onSuccess={() => router.push("/dashboard/hospitals")}
        />
      </div>
    </>
  )
}