import { forwardRef } from 'react';
import { View } from 'react-native';
import type { RsSkinlessProgressBarProps } from '../../types/props';

type ViewRef = View;

const RsProgressBar = forwardRef<ViewRef, RsSkinlessProgressBarProps>(
  ({ progress, style }, ref) => {
    const clamped = Math.min(1, Math.max(0, progress));

    return (
      <View ref={ref} style={style}>
        <View style={{ width: `${clamped * 100}%`, height: '100%' }} />
      </View>
    );
  }
);

RsProgressBar.displayName = 'RsProgressBar';

export default RsProgressBar;