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

function DetailJawaban({ data }) {
	const { jawaban } = data.sanksi.banding;
	return (
		<>
			<p className="lead bb">Jawaban Permohonan Banding</p>
			<form className="form-horizontal">
				<FormGroup>
					<label md="4">Jawaban:</label>
					<div md="8">
						<h3>{jawaban.status}</h3>
					</div>
				</FormGroup>
				<FormGroup>
					<label md="4">Dokumen Jawaban:</label>
					<div md="8">
						<Scrollable height="120px" className="list-group">
							<table className="table table-bordered bg-transparent">
								<tbody>
									{jawaban.files.map((e) => (
										<tr>
											<td>
												<em className="fa-lg far fa-file-code"></em>
											</td>
											<td>
												<a className="text-muted" href={API_URL + e.path} target="_blank" download={e.name}>
													{e.name}
												</a>
											</td>
										</tr>
									))}
								</tbody>
							</table>
						</Scrollable>
					</div>
				</FormGroup>
			</form>
			{jawaban.status === "Ditolak" && (
				<Link
					href={{
						pathname: "/app/pt/dokumen-perbaikan/detail",
						query: { noSanksi: data.sanksi.no_sanksi },
					}}
				>
					<Button color="primary">Perbaiki Dokumen</Button>
				</Link>
			)}
		</>
	);
}

export default DetailJawaban;