// src/views/Community/components/DynamicNewsDetail/CollapsibleHeader.js
// 可折叠模块标题组件

import React from 'react';
import {
  Flex,
  HStack,
  Heading,
  Badge,
  IconButton,
  useColorModeValue,
} from '@chakra-ui/react';
import { ChevronDownIcon, ChevronUpIcon } from '@chakra-ui/icons';

/**
 * 可折叠模块标题组件
 * @param {Object} props
 * @param {string} props.title - 标题文本
 * @param {boolean} props.isOpen - 是否展开
 * @param {Function} props.onToggle - 切换展开/收起的回调
 * @param {number} props.count - 可选的数量徽章
 */
const CollapsibleHeader = ({ title, isOpen, onToggle, count = null }) => {
  const sectionBg = useColorModeValue('gray.50', 'gray.750');
  const hoverBg = useColorModeValue('gray.100', 'gray.700');
  const headingColor = useColorModeValue('gray.700', 'gray.200');

  return (
    <Flex
      justify="space-between"
      align="center"
      cursor="pointer"
      onClick={onToggle}
      p={3}
      bg={sectionBg}
      borderRadius="md"
      _hover={{ bg: hoverBg }}
      transition="background 0.2s"
    >
      <HStack spacing={2}>
        <Heading size="sm" color={headingColor}>
          {title}
        </Heading>
        {count !== null && count > 0 && (
          <Badge colorScheme="blue" borderRadius="full">
            {count}
          </Badge>
        )}
      </HStack>
      <IconButton
        icon={isOpen ? <ChevronUpIcon /> : <ChevronDownIcon />}
        size="sm"
        variant="ghost"
        aria-label={isOpen ? '收起' : '展开'}
      />
    </Flex>
  );
};

export default CollapsibleHeader;