import React from "react";
import { Modal, Typography, Tag } from "antd";
import StatusBar from "./StatusBar";
import CommentSection from "./CommentSection";
const { Text } = Typography;

const ProgressModal = ({ visible, handleShow, data, destroy }) => {
	return (
		<>
			<Modal
				visible={visible}
				footer={null}
				onCancel={handleShow}
				centered
				width={900}
				destroyOnClose={destroy}
			>
				{data[0] && (
					<>
						<h3>
							{data[0].userData[0].name}{" "}
							<Tag color="red">{data[0].userData[0].role}</Tag>
						</h3>

						<h3>{data.title}</h3>
						<Text
							code
							style={{ display: "flex", fontSize: "1.1rem" }}
						>
							{data.description}
						</Text>
						<br />
						<StatusBar status={data[0].status} modal />
						<br />
					</>
				)}
				<h3>Added Comments</h3>
				<CommentSection details={data[0]} />
			</Modal>
		</>
	);
};

export default ProgressModal;