import { useInitiativeOperations } from '../../context/InitiativeOperationsContext.jsx'
import { MilestonesSection } from '../../components/MilestonesSection.jsx'

export function InitiativePlanPage() {
  const {
    milestones,
    capabilities,
    formBusy,
    handleCreateMilestone,
    handleMilestoneStatus,
    handleDeleteMilestone,
    error,
  } = useInitiativeOperations()

  if (!capabilities.has('kairo.initiative.read')) {
    return null
  }

  return (
    <>
      {error && <p className="error">{error}</p>}
      <MilestonesSection
        milestones={milestones}
        canManage={capabilities.has('kairo.milestone.manage')}
        onCreate={handleCreateMilestone}
        onUpdateStatus={handleMilestoneStatus}
        onDelete={handleDeleteMilestone}
        busy={formBusy}
      />
    </>
  )
}