import React from 'react';
import { Text, View } from 'react-native';

import { toolWidgetStyles } from './toolWidgetStyles';

export type KeyValueItem = {
  label: string;
  value: string;
};

export function KeyValueList({ items }: { items: KeyValueItem[] }) {
  if (items.length === 0) return null;

  return (
    <View style={toolWidgetStyles.keyValueList}>
      {items.map((item, index) => (
        <View key={`${item.label}-${index}`} style={toolWidgetStyles.keyValueRow}>
          <Text numberOfLines={1} style={toolWidgetStyles.keyValueLabel}>{item.label}</Text>
          <Text style={toolWidgetStyles.keyValueValue}>{item.value}</Text>
        </View>
      ))}
    </View>
  );
}