import { AllocationChart } from './AllocationChart';
import type { PortfolioDetail } from '@/shared/api/responses';

export function PortfolioSummary({ portfolio }: { portfolio: PortfolioDetail }) {
  return (
    <div
      style={{
        display: 'flex',
        gap: 32,
        padding: 20,
        background: 'var(--color-surface)',
        border: '1px solid #e0e0e0',
        borderRadius: 'var(--border-radius)',
      }}
    >
      <AllocationChart positions={portfolio.positions} totalValue={portfolio.totalValue} />
      <div>
        <div style={{ fontSize: 12, color: 'var(--color-text-secondary)', marginBottom: 4 }}>
          Общая стоимость
        </div>
        <div style={{ fontSize: 24, fontWeight: 700 }}>
          {portfolio.totalValue?.toLocaleString('ru-RU', {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2,
          })}
          <span
            style={{
              fontSize: 14,
              fontWeight: 400,
              color: 'var(--color-text-secondary)',
              marginLeft: 4,
            }}
          >
            {portfolio.currency}
          </span>
        </div>
      </div>
      <div>
        <div style={{ fontSize: 12, color: 'var(--color-text-secondary)', marginBottom: 4 }}>
          Позиций
        </div>
        <div style={{ fontSize: 24, fontWeight: 700 }}>{portfolio.positions.length}</div>
      </div>
    </div>
  );
}