import styles from './StakeQuotePanel.module.css'

export interface QuoteRow {
  label: string
  value: string
  accent?: 'success' | 'highlight'
  /** Финальный акцентный итог — отделяется разделителем и показывается крупнее. */
  emphasis?: boolean
}

interface Props {
  rows: QuoteRow[]
  loading?: boolean
}

export function StakeQuotePanel({ rows, loading }: Props) {
  return (
    <div className={styles.panel} data-loading={loading ? 'true' : undefined}>
      {rows.map(({ label, value, accent, emphasis }) => (
        <div key={label} className={`${styles.row} ${emphasis ? styles.rowTotal : ''}`}>
          <span className={styles.label}>{label}</span>
          <span className={`${styles.value} ${emphasis ? styles.valueLg : ''} ${accent ? styles[accent] : ''}`}>
            {value}
          </span>
        </div>
      ))}
    </div>
  )
}
