"use client"

import { useRouter } from "next/navigation"
import { Navbar } from "@/components/dashboard/navbar"
import { ArticleForm } from "@/components/dashboard/articles/ArticleForm"
import { FileText } from "lucide-react"

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

  return (
    <>
      <Navbar
        title="Create Article"
        breadcrumbs={[
          { label: "Dashboard", href: "/dashboard" },
          { label: "Articles", href: "/dashboard/articles" },
          { 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 Article</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(43,182,115,0.10)",
                  color: "var(--brand-green)",
                  border: "1px solid rgba(43,182,115,0.20)",
                }}
              >
                <FileText className="w-3 h-3" aria-hidden="true" />
                CMS
              </span>
            </div>
            <p className="text-muted-foreground text-sm font-sans">
              Write and publish a new medical article with rich content, overview stats, and FAQs.
            </p>
          </div>
        </div>

        <ArticleForm onSuccess={() => router.push("/dashboard/articles")} />
      </div>
    </>
  )
}