file-starter/src/client/home/pages/FinancialDashboard/components/VariationModal.tsx

interface VariationModalProps {
  isOpen: boolean;
  onClose: () => void;
}

export function VariationModal({ isOpen, onClose }: VariationModalProps) {
  // 如果弹窗未打开，不渲染任何内容
  if (!isOpen) {
    return null;
  }

  // 示例数据 - 实际应该从API获取
  const variationData = [
    { metric: '资产总额', value: '+15.2%', color: 'text-blue-400' },
    { metric: '资产净额', value: '+12.8%', color: 'text-yellow-400' },
    { metric: '利润总额', value: '+8.5%', color: 'text-cyan-400' },
    { metric: '净利润', value: '+7.2%', color: 'text-purple-400' },
    { metric: '收入', value: '+18.3%', color: 'text-green-400' },
    { metric: '资产负债率', value: '-2.1%', color: 'text-red-400' },
  ];

  return (
    <>
      {/* 1. 遮罩层 - 提供视觉隔离和点击外部关闭功能 */}
      <div
        className="fixed inset-0 bg-black/60 backdrop-blur-sm z-50"
        onClick={onClose}
      />

      {/* 2. 弹出框容器 - 弹窗主体容器 */}
      <div className="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-50 w-full max-w-2xl">
        <div className="bg-slate-800/90 backdrop-blur-md border border-slate-600/50 rounded-xl shadow-2xl">

          {/* 3. 弹出框数据 - 弹窗内容区域 */}
          <div className="p-8">
            {/* 标题 */}
            <div className="text-center mb-8">
              <h2 className="text-2xl font-bold text-white mb-2">
                财务指标变动幅度
              </h2>
              <p className="text-slate-400">
                2024年与2023年相比的变动情况
              </p>
            </div>

            {/* 数据网格 */}
            <div className="grid grid-cols-2 gap-6">
              {variationData.map((item) => (
                <div
                  key={item.metric}
                  className="bg-slate-700/50 backdrop-blur-sm rounded-lg p-4 border border-slate-600/30"
                >
                  <div className="text-center">
                    <div className="text-lg font-medium text-white mb-2">
                      {item.metric}
                    </div>
                    <div className={`text-2xl font-bold ${item.color}`}>
                      {item.value}
                    </div>
                  </div>
                </div>
              ))}
            </div>

            {/* 4. 返回按钮 - 弹窗操作控件 */}
            <div className="flex justify-center mt-8">
              <button
                onClick={onClose}
                className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-lg font-medium transition-colors duration-200 shadow-lg hover:shadow-xl"
              >
                返回
              </button>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}