/**
 * Строка списка «ключ — значение» в стиле iOS 26.
 * Переиспользуется для статистики, настроек и т.п.
 */

'use client';

import React from 'react';

export interface ListRowProps {
  /** Подпись слева */
  label: string;
  /** Значение справа */
  value: React.ReactNode;
  /** Иконка слева от подписи (опционально) */
  icon?: React.ReactNode;
  /** Выделить значение (primary, tertiary или error) */
  highlight?: boolean | 'primary' | 'tertiary' | 'error';
  /** Убрать нижний разделитель */
  last?: boolean;
  className?: string;
}

export const ListRow: React.FC<ListRowProps> = ({
  label,
  value,
  icon,
  highlight = false,
  last = false,
  className = '',
}) => {
  return (
    <div
      className={`ios26-list-row ${className}`.trim()}
      style={last ? { borderBottom: 'none' } : undefined}
    >
      <span
        style={{
          display: 'flex',
          alignItems: 'center',
          gap: 8,
        }}
      >
        {icon && (
          <span
            style={{
              display: 'inline-flex',
              alignItems: 'center',
              justifyContent: 'center',
              color: 'var(--md-sys-color-primary)',
            }}
          >
            {icon}
          </span>
        )}
        <span className="ios26-list-row-label">{label}</span>
      </span>
      <span
        className="ios26-list-row-value"
        style={
          highlight
            ? {
                color:
                  highlight === 'tertiary'
                    ? 'var(--md-sys-color-tertiary)'
                    : highlight === 'error'
                    ? 'var(--md-sys-color-error)'
                    : 'var(--md-sys-color-primary)',
              }
            : undefined
        }
      >
        {value}
      </span>
    </div>
  );
};