import { useState, useEffect } from 'react'

type DocSection = 'user-guide' | 'faq' | 'publishing' | 'payment'

interface DocLink {
  id: DocSection
  title: string
  file: string
}

export function useDocs(docs: DocLink[]) {
  const [selectedDoc, setSelectedDoc] = useState<DocSection>('user-guide')
  const [docContent, setDocContent] = useState<string>('')
  const [loading, setLoading] = useState(false)

  const loadDoc = async (docId: DocSection) => {
    const doc = docs.find((d) => d.id === docId)
    if (!doc) return

    setLoading(true)
    setSelectedDoc(docId)

    try {
      const response = await fetch(`/api/docs/${doc.file}`)
      if (response.ok) {
        const text = await response.text()
        setDocContent(text)
      } else {
        setDocContent('# Erreur\n\nImpossible de charger la documentation.')
      }
    } catch {
      setDocContent('# Erreur\n\nImpossible de charger la documentation.')
    } finally {
      setLoading(false)
    }
  }

  useEffect(() => {
    loadDoc('user-guide')
  }, [])

  return {
    selectedDoc,
    docContent,
    loading,
    loadDoc,
  }
}