import React from 'react';
import { Portfolio } from '../../types/financial';

interface PortfolioSummaryProps {
  portfolio: Portfolio;
}

export const PortfolioSummary: React.FC<PortfolioSummaryProps> = ({ portfolio }) => {
  const formatCurrency = (value: number) => {
    if (value >= 1000) {
      return `$${(value / 1000).toFixed(1)}K`;
    }
    return `$${value.toFixed(0)}`;
  };

  const isPositive = portfolio.dayChange >= 0;

  return (
    <div className="bg-[#111111] rounded-lg p-3 border border-[#2a2a2a]">
      <div className="flex items-center justify-between mb-2">
        <h4 className="text-[10px] font-mono uppercase tracking-wider text-[#888888]">Portfolio</h4>
        <span className="text-[10px] font-mono text-[#888888]">{portfolio.holdings.length} positions</span>
      </div>

      <div className="space-y-2">
        <div>
          <div className="text-[10px] text-[#888888] font-mono">Total Value</div>
          <div className="text-lg font-mono font-bold text-[#e0e0e0]">
            {formatCurrency(portfolio.totalValue)}
          </div>
        </div>

        <div className={`text-sm font-mono ${isPositive ? 'text-[#00d26a]' : 'text-[#ff4757]'}`}>
          {isPositive ? '+' : ''}{formatCurrency(portfolio.dayChange)} ({isPositive ? '+' : ''}{portfolio.dayChangePercent.toFixed(2)}%)
          <div className="text-[10px] text-[#888888]">Today</div>
        </div>
      </div>

      {/* Mini Holdings List */}
      <div className="mt-3 pt-3 border-t border-[#2a2a2a] space-y-1.5">
        {portfolio.holdings.slice(0, 3).map((holding) => (
          <div key={holding.symbol} className="flex items-center justify-between text-xs">
            <span className="font-mono text-[#e0e0e0]">{holding.symbol}</span>
            <span className={`font-mono ${holding.gainLoss >= 0 ? 'text-[#00d26a]' : 'text-[#ff4757]'}`}>
              {holding.gainLoss >= 0 ? '+' : ''}{holding.gainLossPercent.toFixed(1)}%
            </span>
          </div>
        ))}
      </div>
    </div>
  );
};
