import React from "react";
import { View, StyleSheet, ViewStyle, StyleProp } from "react-native";
import { useTheme } from "../contexts/ThemeContext";

interface ProgressBarProps {
  progress: number; // 0-1 (e.g., 0.75 for 75%)
  color?: string;
  backgroundColor?: string;
  height?: number;
  borderRadius?: number;
  style?: StyleProp<ViewStyle>;
}

/**
 * ProgressBar - Simple linear progress indicator
 *
 * Usage:
 * - Goal progress tracking
 * - Loading states
 * - Completion indicators
 *
 * Props:
 * - progress: Value between 0 and 1 (e.g., 0.75 for 75%)
 * - color: Custom fill color (defaults to theme primary)
 * - backgroundColor: Custom track color (defaults to theme border)
 * - height: Bar height in pixels (defaults to 8)
 * - borderRadius: Corner radius (defaults to 999 for full pill shape)
 */
export function ProgressBar({
  progress,
  color,
  backgroundColor,
  height = 8,
  borderRadius = 999,
  style,
}: ProgressBarProps) {
  const { colors } = useTheme();

  // Clamp progress between 0 and 1
  const clampedProgress = Math.min(Math.max(progress, 0), 1);

  const trackColor = backgroundColor || colors.border;
  const fillColor = color || colors.primary;

  return (
    <View
      style={[
        styles.track,
        {
          height,
          borderRadius,
          backgroundColor: trackColor,
        },
        style,
      ]}
    >
      <View
        style={[
          styles.fill,
          {
            width: `${clampedProgress * 100}%`,
            height,
            borderRadius,
            backgroundColor: fillColor,
          },
        ]}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  track: {
    width: "100%",
    overflow: "hidden",
  },
  fill: {
    position: "absolute",
    left: 0,
    top: 0,
  },
});