'use client'

import { useRouter } from 'next/navigation'
import { ChevronLeft } from 'lucide-react'

import { Header, PageContainer } from '@/components/layout/header'
import { TreatmentPlanForm } from '@/components/treatment/TreatmentPlanForm'
import { useApp } from '../provider'

export default function NewTreatmentPlanPage() {
  const router = useRouter()
  const { currentWorkspace } = useApp()

  return (
    <>
      <Header 
        title="Create Treatment Plan"
        leftAction={{
          icon: <ChevronLeft className="w-6 h-6" />,
          label: 'Back',
          onClick: () => router.push('/treatment')
        }}
      />
      <PageContainer className="pt-4">
        <div className="mb-6">
          <p className="text-secondary-500">
            Set up your treatment schedule to track progress and celebrate milestones.
          </p>
        </div>
        <TreatmentPlanForm workspaceId={currentWorkspace.id} />
      </PageContainer>
    </>
  )
}