import { useState, ReactNode } from 'react';
import './Folder.css';

interface FolderProps {
  title: string;
  children?: ReactNode;
}

export default function Folder({ title, children }: FolderProps): ReactNode {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div className="folder-item">
      <div className="folder-header" onClick={() => setIsOpen(!isOpen)}>
        <span>{title}</span>
        {/* 使用同一个字符配合旋转动画，视觉更连贯 */}
        <span className={`arrow ${isOpen ? 'show-arrow' : ''}`}>▼</span>
      </div>
      
      {children && (
        <div className={`folder-content ${isOpen ? 'show' : ''}`}>
          <div className="content-inner">{children}</div>
        </div>
      )}
    </div>
  );
}