/**
 * PageGuide 页面操作指导组件 — 折叠式，默认收起
 * 统一用于各页面/Tab的操作说明，点击展开查看
 */
import { useState, ReactNode } from 'react'
import { ChevronRight, Lightbulb } from 'lucide-react'

interface PageGuideProps {
  /** 指导标题，默认"操作说明" */
  title?: string
  /** 指导内容，支持字符串或自定义JSX */
  children: ReactNode
  /** 额外类名 */
  className?: string
}

export default function PageGuide({ title = '操作说明', children, className = '' }: PageGuideProps) {
  const [open, setOpen] = useState(false)

  return (
    <div className={`rounded-md border border-blue-100 bg-blue-50/50 ${className}`}>
      <button
        onClick={() => setOpen(!open)}
        className="flex items-center gap-1.5 w-full px-3 py-1.5 text-xs font-medium text-blue-600 hover:text-blue-700 transition-colors"
      >
        <ChevronRight className={`w-3 h-3 transition-transform ${open ? 'rotate-90' : ''}`} />
        <Lightbulb className="w-3.5 h-3.5" />
        {title}
      </button>
      {open && (
        <div className="px-3 pb-2.5 text-xs text-blue-600/80 leading-relaxed">
          {children}
        </div>
      )}
    </div>
  )
}
