// src/views/Community/components/DynamicNewsDetail/CollapsibleSection.js
// 通用可折叠区块组件

import React from 'react';
import {
  Box,
  Collapse,
  useColorModeValue,
} from '@chakra-ui/react';
import CollapsibleHeader from './CollapsibleHeader';

/**
 * 通用可折叠区块组件
 * @param {Object} props
 * @param {string} props.title - 标题文本
 * @param {boolean} props.isOpen - 是否展开
 * @param {Function} props.onToggle - 切换展开/收起的回调
 * @param {number} props.count - 可选的数量徽章
 * @param {React.ReactNode} props.subscriptionBadge - 可选的会员标签组件
 * @param {boolean} props.isLocked - 是否锁定（不可展开）
 * @param {Function} props.onLockedClick - 锁定时点击的回调
 * @param {React.ReactNode} props.children - 子内容
 */
const CollapsibleSection = ({
  title,
  isOpen,
  onToggle,
  count = null,
  subscriptionBadge = null,
  isLocked = false,
  onLockedClick = null,
  children
}) => {
  const sectionBg = useColorModeValue('gray.50', 'gray.750');

  // 处理点击：如果锁定则触发锁定回调，否则触发正常切换
  const handleToggle = () => {
    if (isLocked && onLockedClick) {
      onLockedClick();
    } else if (!isLocked) {
      onToggle();
    }
  };

  return (
    <Box>
      <CollapsibleHeader
        title={title}
        isOpen={isOpen}
        onToggle={handleToggle}
        count={count}
        subscriptionBadge={subscriptionBadge}
      />
      <Collapse
        in={isOpen && !isLocked}
        animateOpacity
        unmountOnExit={false}
        startingHeight={0}
      >
        <Box mt={2} bg={sectionBg} p={3} borderRadius="md">
          {children}
        </Box>
      </Collapse>
    </Box>
  );
};

export default CollapsibleSection;