text: import React from "react";
  import { DivTask } from "../styles/styles";
  
  export default function Task(props) {
  	const task = props.task;
  
  	return (
  		<DivTask
  			style={{
  				borderColor: progressColor(task.progress),
  			}}
  		>
  			<div
  				className="container-fluid"
  				style={{ padding: "10px", height: "100%" }}
  			>
  				<b>{task.name}</b>
  				<p>
  					<span
  						className="badge"
  						style={{
  							backgroundColor: colorBadge(task.type),
  							color: "white",
  							borderRadius: "15px",
  						}}
  					>
  						{typeToString(task.type)}
  					</span>
  				</p>
  				<p style={{ height: "100px" }}>{task.description}</p>
  				<div className="progress">
  					<div
  						className="progress-bar"
  						style={{
  							width: task.progress + "%",
  						}}
  					>
  						{task.progress}%
  					</div>
  				</div>
  			</div>
  		</DivTask>
  	);
  
  	function colorBadge(type) {
  		switch (type) {
  			case 1:
  				return "#7775e7";
  			case 2:
  				return "#F37C7C";
  			case 3:
  				return "#FDCA49";
  			default:
  				return "black";
  		}
  	}
  
  	function typeToString(type) {
  		switch (type) {
  			case 1:
  				return "Front-end";
  			case 2:
  				return "Back-end";
  			case 3:
  				return "Ifraestrutura";
  			default:
  				return "Erro";
  		}
  	}
  
  	function progressColor(progress) {
  		if (progress === 0) return "#7775e7";
  		if (progress > 0 && progress < 100) return "#FDCA49";
  		if (progress === 100) return "#F37C7C";
  		return "black";
  	}
  }
  