import { FormGroup, Button } from "reactstrap";
import Scrollable from "@/components/Common/Scrollable";
import Link from "next/link";

function DetailJawaban({ data, sanksiId }) {
	return (
		<>
			<p className="lead bb">Jawaban Permohonan Banding</p>
			<form className="form-horizontal">
				<FormGroup>
					<label md="4">Jawaban:</label>
					<div md="8">
						<h3>{data.status}</h3>
					</div>
				</FormGroup>
				{data.dokumen.length ? (
					<FormGroup>
						<label md="4">Dokumen Jawaban:</label>
						<div md="8">
							<Scrollable height="120px" className="list-group">
								<table className="table table-bordered bg-transparent">
									<tbody>
										{data.dokumen.map((e) => (
											<tr>
												<td  style={{ width: "30px" }}>
													<em className="fa-lg far fa-file-code"></em>
												</td>
												<td>
													<a className="text-muted" href={e.path} target="_blank" download={e.judul}>
														{e.judul}
													</a>
												</td>
											</tr>
										))}
									</tbody>
								</table>
							</Scrollable>
						</div>
					</FormGroup>
				) : (
					""
				)}
			</form>
			{data.status === "Ditolak" && (
				<Link
					href={{
						pathname: "/pt/dokumen-perbaikan/detail",
						query: { id: sanksiId },
					}}
				>
					{/* <Button color="primary">Perbaiki Dokumen</Button> */}
					<Button color className="btn-login">
						<span className="font-color-white">
							Dokumen Perbaikan
						</span>
					</Button>
				</Link>
			)}
		</>
	);
}

export default DetailJawaban;