import React, { useState, useEffect } from "react";
import styled from "styled-components";

const ProgressBarContainer = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
`;

const ProgressBarInput = styled.input`
  width: 100%;
`;

const ProgressBarFill = styled.div`
  width: ${(props) => props.progress}%;
  height: 30px;
  border-radius: 5px;
  background-color: ${(props) => props.color};
  transition: width 0.5s ease-in-out;
`;

const ProgressBar = ({ initialProgress = 50 }) => {
  const [progress, setProgress] = useState(initialProgress);
  const [color, setColor] = useState("#6ab04c");

  useEffect(() => {
    if (progress < 30) {
      setColor("#ff0000"); // Red
    } else if (progress < 70) {
      setColor("#ffa500"); // Orange
    } else {
      setColor("#6ab04c"); // Green
    }
  }, [progress]);

  const handleSlide = (event) => {
    const newProgress = Number(event.target.value);
    setProgress(newProgress);
  };

  return (
    <ProgressBarContainer>
      <ProgressBarInput
        type="range"
        min="0"
        max="100"
        value={progress}
        onChange={handleSlide}
      />
      <ProgressBarFill progress={progress} color={color} />
    </ProgressBarContainer>
  );
};

export default ProgressBar;
