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

import { useTheme } from '../theme/context';

interface ProgressBarProps {
  label?: string;
  value: number; // 0-100
  color?: string;
}

export function ProgressBar({ label, value, color }: ProgressBarProps) {
  const theme = useTheme();
  const barColor = color || theme.colors.primary;

  return (
    <View style={styles.container}>
      {label && (
        <View style={styles.header}>
          <Text style={[styles.label, { color: theme.colors.text.primary }]}>{label}</Text>
          <Text style={[styles.value, { color: theme.colors.text.secondary }]}>{value}%</Text>
        </View>
      )}
      <View style={[styles.track, { backgroundColor: 'rgba(148, 163, 184, 0.2)' }]}>
        <View
          style={[
            styles.fill,
            {
              width: `${value}%`,
              backgroundColor: barColor,
            },
          ]}
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    width: '100%',
    marginVertical: 4,
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginBottom: 6,
  },
  label: {
    fontSize: 12,
    fontWeight: '700',
  },
  value: {
    fontSize: 12,
  },
  track: {
    height: 8,
    borderRadius: 999,
    overflow: 'hidden',
  },
  fill: {
    height: '100%',
    borderRadius: 999,
  },
});