// src/components/SubscriptionBadge.js
// 会员专享标签组件

import React from 'react';
import {
  Badge,
  HStack,
  Icon,
  Text,
  useColorModeValue,
} from '@chakra-ui/react';
import { FaStar, FaCrown } from 'react-icons/fa';
import { logger } from '../utils/logger';

/**
 * 会员专享标签组件
 * @param {Object} props
 * @param {'pro' | 'max'} props.tier - 会员等级：pro 或 max
 * @param {'sm' | 'md'} props.size - 标签尺寸
 */
const SubscriptionBadge = ({ tier = 'pro', size = 'sm' }) => {
  // PRO 和 MAX 配置
  const config = {
    pro: {
      label: 'PRO专享',
      icon: FaStar,
      bgGradient: 'linear(to-r, blue.400, purple.500)',
      color: 'white',
    },
    max: {
      label: 'MAX专享',
      icon: FaCrown,
      bgGradient: 'linear(to-r, pink.400, red.500)',
      color: 'white',
    },
  };

  const tierConfig = config[tier] || config.pro;

  // 尺寸配置
  const sizeConfig = {
    sm: {
      fontSize: 'xs',
      iconSize: 2.5,
      px: 2,
      py: 0.5,
    },
    md: {
      fontSize: 'sm',
      iconSize: 3,
      px: 3,
      py: 1,
    },
  };

  const currentSize = sizeConfig[size] || sizeConfig.sm;

  return (
    <Badge
      bgGradient={tierConfig.bgGradient}
      color={tierConfig.color}
      borderRadius="full"
      px={currentSize.px}
      py={currentSize.py}
      fontSize={currentSize.fontSize}
      fontWeight="bold"
      boxShadow="sm"
      display="inline-flex"
      alignItems="center"
      gap={1}
      transition="all 0.2s"
      _hover={{
        transform: 'scale(1.05)',
        boxShadow: 'md',
      }}
    >
      <Icon as={tierConfig.icon} boxSize={currentSize.iconSize} />
      <Text>{tierConfig.label}</Text>
    </Badge>
  );
};

export default SubscriptionBadge;