import styled from 'styled-components';

const DownloadProgress = ({ progress }) => {
	return (
		<ProgressWrapper>
			<ProgressText>다운로드 중... {progress}%</ProgressText>
			<ProgressBarContainer>
				<ProgressBarFill style={{ width: `${progress}%` }} />
			</ProgressBarContainer>
		</ProgressWrapper>
	);
};

export default DownloadProgress;

const ProgressWrapper = styled.div`
  margin: 10px 0;
  padding: 10px;
  background-color: #f9f9f9;
  border-radius: 4px;
  border: 1px solid #ddd;
`;

const ProgressText = styled.div`
  margin-bottom: 5px;
  text-align: center;
  font-weight: bold;
  color: #333;
`;

const ProgressBarContainer = styled.div`
  height: 20px;
  background-color: #e0e0e0;
  border-radius: 10px;
  overflow: hidden;
`;

const ProgressBarFill = styled.div`
  height: 100%;
  background-color: #4caf50;
  transition: width 0.3s ease;
`;