import { StyleSheet, View } from 'react-native';
import { colors, radius } from '../theme/proulr-theme';

export function ProgressBar({ progress, color = colors.accent }: { progress: number; color?: string }) {
  const pct = Math.min(1, Math.max(0, progress));
  return (
    <View style={styles.progressTrack}>
      <View style={[styles.progressFill, { width: `${pct * 100}%`, backgroundColor: color }]} />
    </View>
  );
}

const styles = StyleSheet.create({
  progressTrack: {
    height: 8,
    borderRadius: radius.pill,
    backgroundColor: colors.surface2,
    overflow: 'hidden',
  },
  progressFill: { height: '100%', borderRadius: radius.pill },
});