// src/views/Community/components/DynamicNewsDetail/RelatedConceptsSection/TradingDateInfo.js
// 交易日期信息提示组件

import React from 'react';
import {
  Box,
  HStack,
  Text,
  useColorModeValue,
} from '@chakra-ui/react';
import { FaCalendarAlt } from 'react-icons/fa';
import moment from 'moment';

/**
 * 交易日期信息提示组件
 * @param {Object} props
 * @param {string} props.effectiveTradingDate - 有效交易日期（涨跌幅数据日期）
 * @param {string|Object} props.eventTime - 事件发生时间
 */
const TradingDateInfo = ({ effectiveTradingDate, eventTime }) => {
  const sectionBg = useColorModeValue('gray.50', 'gray.750');
  const headingColor = useColorModeValue('gray.700', 'gray.200');
  const stockCountColor = useColorModeValue('gray.500', 'gray.400');

  if (!effectiveTradingDate) {
    return null;
  }

  return (
    <Box mb={4} p={3} bg={sectionBg} borderRadius="md">
      <HStack spacing={2}>
        <FaCalendarAlt color="gray" />
        <Text fontSize="sm" color={headingColor}>
          涨跌幅数据日期：{effectiveTradingDate}
          {eventTime && effectiveTradingDate !== moment(eventTime).format('YYYY-MM-DD') && (
            <Text as="span" ml={2} fontSize="xs" color={stockCountColor}>
              (事件发生于 {typeof eventTime === 'object' ? moment(eventTime).format('YYYY-MM-DD HH:mm') : moment(eventTime).format('YYYY-MM-DD HH:mm')}，显示下一交易日数据)
            </Text>
          )}
        </Text>
      </HStack>
    </Box>
  );
};

export default TradingDateInfo;