"use client" import { useState, useEffect } from "react" import fs from "fs" import path from "path" import { remark } from "remark" import html from "remark-html" import CopyableCode from "@/components/CopyableCode" const guidesDirectory = path.join(process.cwd(), "..", "guides") async function getGuideContent(slug: string) { const fullPath = path.join(guidesDirectory, `${slug}.md`) try { const fileContents = fs.readFileSync(fullPath, "utf8") const result = await remark().use(html).process(fileContents) return result.toString() } catch (error) { console.error(`Error reading guide file: ${fullPath}`, error) return "

Guide content not found.

" } } export async function generateStaticParams() { try { if (fs.existsSync(guidesDirectory)) { const guideFiles = fs.readdirSync(guidesDirectory) return guideFiles.map((file) => ({ slug: file.replace(/\.md$/, ""), })) } else { console.warn("Guides directory not found. No static params generated.") return [] } } catch (error) { console.error("Error generating static params for guides:", error) return [] } } function processContent(content: string) { const codeBlockRegex = /
([\s\S]*?)<\/code><\/pre>/g
  return content.replace(codeBlockRegex, (match, code) => {
    return ``
  })
}

export default function GuidePage({ params }: { params: { slug: string } }) {
  const [guideContent, setGuideContent] = useState("")

  useEffect(() => {
    async function fetchContent() {
      const content = await getGuideContent(params.slug)
      setGuideContent(processContent(content))
    }
    fetchContent()
  }, [params.slug])

  useEffect(() => {
    const placeholders = document.querySelectorAll("CopyableCodePlaceholder")
    placeholders.forEach((placeholder, index) => {
      const code = decodeURIComponent(placeholder.getAttribute("code") || "")
      const codeElement = 
      placeholder.replaceWith(codeElement)
    })
  }, [])

  return (
    

      

        

      

    

  )
}