import React from 'react';
import { StyleSheet, View } from 'react-native';
import Animated, {
  useAnimatedStyle,
  interpolate,
  interpolateColor,
} from 'react-native-reanimated';
import { COLORS } from '../constants/colors';

interface TimerBarProps {
  progress: Animated.SharedValue<number>;
}

export const TimerBar: React.FC<TimerBarProps> = ({ progress }) => {
  const barStyle = useAnimatedStyle(() => {
    const width = `${progress.value * 100}%`;
    const backgroundColor = interpolateColor(
      progress.value,
      [0, 0.25, 0.5, 1],
      [COLORS.error, COLORS.accent, COLORS.primary, COLORS.primary]
    );
    return { width, backgroundColor };
  });

  return (
    <View style={styles.container}>
      <View style={styles.track}>
        <Animated.View style={[styles.bar, barStyle]} />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    width: '100%',
    paddingHorizontal: 20,
    paddingTop: 8,
  },
  track: {
    height: 4,
    backgroundColor: COLORS.surfaceLight,
    borderRadius: 2,
    overflow: 'hidden',
  },
  bar: {
    height: '100%',
    borderRadius: 2,
  },
});