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

interface ConfidenceMeterProps {
  confidence: 'low' | 'medium' | 'high';
  showMicroStat?: boolean;
}

export function ConfidenceMeter({ confidence, showMicroStat = true }: ConfidenceMeterProps) {
  const config = {
    high: { color: '#22c55e', segments: 3, label: 'High Confidence', microStat: '73% historical accuracy' },
    medium: { color: '#eab308', segments: 2, label: 'Medium Confidence', microStat: '58% historical accuracy' },
    low: { color: '#6b7280', segments: 1, label: 'Low Confidence', microStat: '42% historical accuracy' },
  };

  const c = config[confidence] || config.low;

  return (
    <View style={styles.container}>
      <View style={styles.meter}>
        {[1, 2, 3].map((i) => (
          <View
            key={i}
            style={[
              styles.segment,
              i <= c.segments ? { backgroundColor: c.color } : styles.segmentInactive,
            ]}
          />
        ))}
      </View>
      <Text style={[styles.label, { color: c.color }]}>{c.label}</Text>
      {showMicroStat && (
        <Text style={styles.microStat}>{c.microStat}</Text>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: { alignItems: 'center', gap: 4 },
  meter: { flexDirection: 'row', gap: 4 },
  segment: { width: 24, height: 6, borderRadius: 3 },
  segmentInactive: { backgroundColor: '#e5e7eb' },
  label: { fontSize: 12, fontWeight: '600' },
  microStat: { fontSize: 10, color: '#9ca3af' },
});