import React from 'react';

interface UserCardProps {
  /** 用户计划名称 */
  plan_name?: string;
  /** 子组件内容 */
  children: React.ReactNode;
}

/**
 * 用户卡片组件
 * 根据用户级别显示不同的颜色和样式
 */
export default function UserCard({
  plan_name = "none",
  children
}: UserCardProps) {
  // 根据计划名称获取对应的样式
  const getCardStyles = () => {
    switch (plan_name) {
      case "Kickoff":
        return {
          outerBg: "bg-[#3d3c3d]",
          glowColor: "bg-[#c0c0c0]",
          glowShadow: "shadow-[0_0_50px_rgba(192,192,192,0.3)]"
        };
      case "Pro":
        return {
          outerBg: "bg-gradient-to-br from-[#1a1a2e] via-[#16213e] to-[#0f3460]",
          glowColor: "bg-[#4facfe]",
          glowShadow: "shadow-[0_0_50px_rgba(79,172,254,0.4)]"
        };
      case "Ultra":
        return {
          outerBg: "bg-gradient-to-br from-[#0a4a4a] via-[#2a1f4a] to-[#4a0a4a]",
          glowColor: "bg-gradient-to-r from-[rgb(106,244,249)] to-[rgb(199,59,255)]",
          glowShadow: "shadow-[0_0_50px_rgba(106,244,249,0.5)]"
        };
      default: // none
        return {
          outerBg: "bg-[#1a1a1a]",
          glowColor: "bg-[#333]",
          glowShadow: "shadow-[0_0_50px_rgba(51,51,51,0.3)]"
        };
    }
  };

  const styles = getCardStyles();

  return (
    <div
      data-alt="user-card-outer"
      className={`relative w-[18.75rem] overflow-hidden rounded-xl ${styles.outerBg} ${styles.glowShadow}`}
    >
      {/* 发光背景 */}
      <div
        className={`absolute w-56 h-48 ${styles.glowColor} blur-[50px] -left-1/2 -top-1/2 opacity-40`}
      />

      {/* 卡片内容区域 */}
      <div
        data-alt="user-card"
        className={`relative z-[1] w-full h-full flex items-center justify-center text-white rounded-xl overflow-hidden `}
        style={{ margin: '2px' }}
      >
        {/* 计划名称背景文字 - 非 none 时显示 */}
        {plan_name !== "none" && (
          <div
            data-alt="plan-name-background"
            className="absolute inset-0 flex items-center justify-center z-[1] text-white/10 font-bold text-6xl tracking-wider"
            style={{
              transform: 'rotate(-15deg) scale(1.2)',
              textShadow: '0 0 20px rgba(255,255,255,0.1)'
            }}
          >
            {plan_name}
          </div>
        )}

        {/* 内容区域 */}
        <div
          data-alt="user-card-content"
          className="relative z-[2] w-full h-full flex flex-col items-center justify-center rounded-xl"
        >
          {children}
        </div>
      </div>
    </div>
  );
};