moex-vibe/apps/frontend/src/components/StockDetails.tsx

import type { ShareResponse } from '../api/responses';

interface StockDetailsProps {
  stock: ShareResponse;
}

const rowStyle: React.CSSProperties = {
  display: 'flex',
  justifyContent: 'space-between',
  padding: '8px 0',
  borderBottom: '1px solid #eee',
};

export function StockDetails({ stock }: StockDetailsProps) {
  const md = stock.marketData;
  const isPositive = md.change >= 0;

  return (
    <div
      style={{
        background: 'var(--color-surface)',
        borderRadius: 'var(--border-radius)',
        boxShadow: 'var(--shadow)',
        padding: 24,
      }}
    >
      <div style={{ marginBottom: 16 }}>
        <h2 style={{ fontSize: 28, fontWeight: 700 }}>
          {stock.shortName} ({stock.secid})
        </h2>
        <div style={{ fontSize: 14, color: 'var(--color-text-secondary)' }}>
          {stock.name} &middot; {stock.isin}
        </div>
      </div>

      <div style={{ fontSize: 36, fontWeight: 700, marginBottom: 4 }}>
        {md.price.toLocaleString('ru-RU', { minimumFractionDigits: 2 })}{' '}
        <span
          style={{
            fontSize: 18,
            color: isPositive ? 'var(--color-positive)' : 'var(--color-negative)',
          }}
        >
          {isPositive ? '+' : ''}
          {md.change.toFixed(2)} ({md.changePercent.toFixed(2)}%)
        </span>
      </div>

      <div style={{ marginTop: 16 }}>
        <div style={rowStyle}>
          <span>Открытие</span>
          <span>{md.open.toFixed(2)}</span>
        </div>
        <div style={rowStyle}>
          <span>Максимум</span>
          <span>{md.high?.toFixed(2) ?? '—'}</span>
        </div>
        <div style={rowStyle}>
          <span>Минимум</span>
          <span>{md.low?.toFixed(2) ?? '—'}</span>
        </div>
        <div style={rowStyle}>
          <span>Объём</span>
          <span>{md.volume.toLocaleString('ru-RU')}</span>
        </div>
        <div style={rowStyle}>
          <span>Капитализация</span>
          <span>
            {md.issueCapitalization ? (md.issueCapitalization / 1e9).toFixed(2) + ' млрд ₽' : '—'}
          </span>
        </div>
        <div style={rowStyle}>
          <span>ISIN</span>
          <span>{stock.isin}</span>
        </div>
        <div style={rowStyle}>
          <span>Уровень листинга</span>
          <span>{stock.listLevel}</span>
        </div>
      </div>
    </div>
  );
}