import React from 'react';
import type { ProfitSummary } from '../types/index';

interface ProfitDisplayProps {
  profitSummary: ProfitSummary;
}

export const ProfitDisplay: React.FC<ProfitDisplayProps> = ({ 
  profitSummary 
}: ProfitDisplayProps) => {
  const { totalProfit, dailyStats } = profitSummary;
  
  return (
    <div className="flex justify-between items-center p-4 bg-gray-800 text-white shadow-lg">
      {/* 累计收益率（采用答题卡的计算方式） */}
      <div className="flex items-center space-x-2">
        <span className="text-gray-400">累计收益率</span>
        <span className={`text-xl font-bold ${totalProfit >= 0 ? 'text-red-500' : 'text-green-500'}`}>
          {totalProfit >= 0 ? '+' : ''}{(totalProfit * 100).toFixed(2)}%
        </span>
      </div>

      {/* 行情数据 */}
      <div className="flex items-center space-x-6">
        {/* 日期 */}
        <div className="flex flex-col items-center">
          <span className="text-gray-400 text-sm">日期</span>
          <span className="font-medium">{dailyStats.date}</span>
        </div>

        {/* 开盘价 */}
        <div className="flex flex-col items-center">
          <span className="text-gray-400 text-sm">开</span>
          <span className="font-medium">{dailyStats.open.toFixed(2)}</span>
        </div>

        {/* 最高价 */}
        <div className="flex flex-col items-center">
          <span className="text-gray-400 text-sm">高</span>
          <span className="font-medium text-red-500">{dailyStats.high.toFixed(2)}</span>
        </div>

        {/* 收盘价 */}
        <div className="flex flex-col items-center">
          <span className="text-gray-400 text-sm">收</span>
          <span className="font-medium">{dailyStats.close.toFixed(2)}</span>
        </div>

        {/* 最低价 */}
        <div className="flex flex-col items-center">
          <span className="text-gray-400 text-sm">低</span>
          <span className="font-medium text-green-500">{dailyStats.low.toFixed(2)}</span>
        </div>

        {/* 涨跌幅 */}
        <div className="flex flex-col items-center">
          <span className="text-gray-400 text-sm">涨跌幅</span>
          <span className={`font-medium ${dailyStats.change >= 0 ? 'text-red-500' : 'text-green-500'}`}>
            {dailyStats.change >= 0 ? '+' : ''}{dailyStats.change.toFixed(2)}%
          </span>
        </div>
      </div>
    </div>
  );
}; 