import * as React from 'react';
import { Text, View } from '@react-pdf/renderer';

import type { KeyValueItem } from '../../model/types';
import { styles } from '../styles';

export function KeyValueGrid(props: { items: KeyValueItem[] }): React.ReactElement | null {
  const items = (props.items || []).filter(i => i.label && i.value);
  if (!items.length) return null;

  // 2-column layout: (label, value)
  return (
    <View style={styles.kvGrid}>
      {items.map((item, rowIndex) => {
        const isLast = rowIndex === items.length - 1;
        const value = item.unit ? `${item.value} ${item.unit}` : item.value;

        return (
          <View
            key={`${item.label}-${rowIndex}`}
            style={[styles.kvRow, rowIndex % 2 === 0 ? styles.kvRowAlt : null, isLast ? styles.kvRowLast : null]}
            wrap={false}
            minPresenceAhead={12}
          >
            <View style={[styles.kvCell, { width: '50%' }]}>
              <Text style={styles.kvLabelText}>{item.label}</Text>
            </View>
            <View style={[styles.kvCell, { width: '50%' }]}>
              <Text style={styles.kvValueText}>{value}</Text>
            </View>
          </View>
        );
      })}
    </View>
  );
}