"use client"

import { usePathname } from "next/navigation"
import { useEffect, useState } from "react"

export function DynamicTitleClient() {
  const pathname = usePathname()
  const [currentTitle, setCurrentTitle] = useState<string>("")
  const [isLoading, setIsLoading] = useState(true)

  useEffect(() => {
    // 로딩 상태를 true로 설정
    setIsLoading(true)
    
    // 약간의 지연 후 제목 설정 (로딩 효과 방지)
    const timer = setTimeout(() => {
      let title = ""
      
      if (pathname?.includes("/document-class")) {
        title = "Document Class 관리"
      } else if (pathname?.includes("/code-groups")) {
        title = "Code Group 정의"
      } else if (pathname?.includes("/combo-box-settings")) {
        title = "Combo Box 설정"
      } else if (pathname?.includes("/number-types")) {
        title = "Number Type 관리"
      } else if (pathname?.includes("/number-type-configs")) {
        title = "Number Type별 설정"
      } else {
        title = "Document Numbering Rule (해양)"
      }
      
      setCurrentTitle(title)
      setIsLoading(false)
    }, 100) // 100ms 지연

    return () => clearTimeout(timer)
  }, [pathname])

  // 로딩 중에는 아무것도 표시하지 않음
  if (isLoading) {
    return <div className="space-y-0.5">
      <h2 className="text-2xl font-bold tracking-tight">&nbsp;</h2>
    </div>
  }

  return (
    <div className="space-y-0.5">
      <h2 className="text-2xl font-bold tracking-tight">{currentTitle}</h2>
    </div>
  )
}