'use client'
import { useState, useEffect } from 'react'

export default function Template({ children }: { children: React.ReactNode }) {
  const [isMounted, setIsMounted] = useState(false)

  useEffect(() => {
    setIsMounted(true)
  }, [])

  return (
    <>
      {/* 页面加载动画 */}
      {!isMounted && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-white">
          <div className="h-16 w-16 animate-spin rounded-full border-4 border-blue-600 border-t-transparent"></div>
        </div>
      )}

      {/* 主要内容 */}
      <div className={`transition-opacity duration-300 ${isMounted ? 'opacity-100' : 'opacity-0'}`}>
        {children}
      </div>
    </>
  )
}