// src/views/Community/components/EventCard/ImportanceStamp.js
// 重要性印章组件

import React from 'react';
import {
  Box,
  Text,
  useColorModeValue,
} from '@chakra-ui/react';
import { getImportanceConfig } from '../../../../constants/importanceLevels';

/**
 * 重要性印章组件（模拟盖章效果）
 * @param {Object} props
 * @param {string} props.importance - 重要性等级 (S/A/B/C)
 * @param {string} props.size - 印章尺寸 ('sm' | 'md' | 'lg')
 */
const ImportanceStamp = ({ importance, size = 'md' }) => {
  const config = getImportanceConfig(importance);

  // 印章颜色
  const stampColor = useColorModeValue(config.badgeBg, config.badgeBg);

  // 尺寸配置
  const sizeConfig = {
    sm: { outer: '40px', inner: '34px', fontSize: 'md', borderOuter: '2px', borderInner: '1.5px' },
    md: { outer: '50px', inner: '42px', fontSize: 'xl', borderOuter: '3px', borderInner: '2px' },
    lg: { outer: '60px', inner: '52px', fontSize: '2xl', borderOuter: '4px', borderInner: '2.5px' },
  };

  const currentSize = sizeConfig[size];

  return (
    <Box
      position="relative"
      display="inline-block"
    >
      {/* 外层圆形边框（双圈） */}
      <Box
        position="relative"
        w={currentSize.outer}
        h={currentSize.outer}
        borderRadius="50%"
        borderWidth={currentSize.borderOuter}
        borderColor={stampColor}
        display="flex"
        alignItems="center"
        justifyContent="center"
        transform="rotate(-15deg)"
        opacity={0.9}
        boxShadow="0 3px 12px rgba(0,0,0,0.2)"
        bg={useColorModeValue('white', 'gray.800')}
        _hover={{
          opacity: 1,
          transform: "rotate(-15deg) scale(1.15)",
          boxShadow: "0 4px 16px rgba(0,0,0,0.3)",
        }}
        transition="all 0.3s ease"
      >
        {/* 内层圆形边框 */}
        <Box
          position="absolute"
          w={currentSize.inner}
          h={currentSize.inner}
          borderRadius="50%"
          borderWidth={currentSize.borderInner}
          borderColor={stampColor}
        />

        {/* 印章文字 */}
        <Text
          fontSize={currentSize.fontSize}
          fontWeight="black"
          color={stampColor}
          fontFamily={config.stampFont}
          letterSpacing="2px"
          textShadow="0 0 2px currentColor"
        >
          {config.stampText}
        </Text>
      </Box>
    </Box>
  );
};

export default ImportanceStamp;