// 'use client'

// import { useEffect, useState } from 'react'

// export default function AboutPage() {
//   const [data, setData] = useState<any>(null)
//   const [loading, setLoading] = useState(true)

//   useEffect(() => {
//     fetch((process.env.NEXT_PUBLIC_API_URL as string) + "/docs.json")
//       .then((res) => res.json())
//       .then((result) => {
//         setData(result)
//         setLoading(false)
//       })
//       .catch((err) => {
//         console.error(err)
//         setLoading(false)
//       })
//   }, [])

//   return (
//     <div className="p-6">

//       {loading && <p>Loading...</p>}

//       {!loading && data && (
//         <pre>{JSON.stringify(data, null, 2)}</pre>
//       )}
//     </div>
//   )
// }

'use client'

import { useEffect, useState } from 'react'
import Spinner from '@/components/spinner'

export default function AboutPage() {
  const [data, setData] = useState<any>(null)
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    fetch((process.env.NEXT_PUBLIC_API_URL as string) + '/docs.json')
      .then((res) => res.json())
      .then((result) => {
        setData(result)
        setLoading(false)
      })
      .catch(() => {
        setLoading(false)
      })
  }, [])

  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <div className="h-12 w-12 rounded-full border-4 border-gray-300 border-t-blue-600 animate-spin" />
      </div>
    )
  }

  return (
    <div className="flex items-center justify-center min-h-screen bg-primary text-primary transition-theme">
        <Spinner/>
      </div>
  )
}