import { StyleSheet, Text, View } from 'react-native';
import { useAppearance } from '@/src/context/AppearanceContext';

interface BarChartItem {
  label: string;
  value: number;
}

interface SimpleBarChartProps {
  data: BarChartItem[];
  unit?: string;
  maxValue?: number;
}

export function SimpleBarChart({ data, unit = '', maxValue }: SimpleBarChartProps) {
  const { colors } = useAppearance();
  const max = maxValue ?? Math.max(...data.map((d) => d.value), 1);

  return (
    <View style={styles.container}>
      {data.map((item) => {
        const pct = Math.min((item.value / max) * 100, 100);
        return (
          <View key={item.label} style={styles.row}>
            <Text style={[styles.label, { color: colors.textMuted }]} numberOfLines={1}>
              {item.label}
            </Text>
            <View style={[styles.track, { backgroundColor: colors.background }]}>
              <View style={[styles.fill, { width: `${pct}%`, backgroundColor: colors.brand }]} />
            </View>
            <Text style={[styles.value, { color: colors.text }]}>
              {item.value}
              {unit}
            </Text>
          </View>
        );
      })}
    </View>
  );
}

const styles = StyleSheet.create({
  container: { gap: 10 },
  row: { flexDirection: 'row', alignItems: 'center', gap: 8 },
  label: { width: 52, fontSize: 11, fontWeight: '600' },
  track: { flex: 1, height: 10, borderRadius: 999, overflow: 'hidden' },
  fill: { height: '100%', borderRadius: 999 },
  value: { width: 56, fontSize: 11, fontWeight: '600', textAlign: 'right' },
});
