import { FC, useEffect } from 'react'
import { useParams } from 'react-router-dom'
import { TemplateManager } from '../../../../components/TemplateManager/TemplateManager'
import { useTemplateContext } from '../../../../contexts/TemplateContext'

export const TemplateSetup: FC = () => {
  const { templateId } = useParams<{ templateId: string }>()
  const { templates } = useTemplateContext()

  useEffect(() => {
    if (templateId) {
      const template = templates.find((t) => t.id === templateId)
      if (template) {
        console.log('Opening template for editing:', template)
      }
    }
  }, [templateId, templates])

  return <TemplateManager templateId={templateId} />
}