import Datatable from "@/components/Tables/Datatable";
import { Button } from "reactstrap";
import Link from "next/link";
import moment from "moment";

function TableSanksi({ listData, to, linkName }) {
	return (
		<div className="card b">
			<div className="card-body card-over">
				<Datatable options={{ responsive: false, ordering: true }}>
					<table className="table w-100" data-order='[0, "desc"]'>
						<thead>
							<tr>
								<th>Nomor Sanksi</th>
								<th>Keterangan Sanksi</th>
								{/* <th>Created</th> */}
								<th>Status</th>
								<th></th>
							</tr>
						</thead>
						<tbody>
							{listData.length
								? listData.map((data) => {
									return (
										<tr key={data._id}>
											{/* <td>{data.no_sanksi}</td> */}
											<td>
												<div className="media align-items-center">
													<div className="media-body d-flex">
														<div>
														<p  style={{ display: "none" }}>{data.createdAt}</p>
															<h4>{data.no_sanksi}</h4>
															<p>{moment(data.createdAt).format("MM-DD-YYYY")}</p>
														</div>
													</div>
												</div>
											</td>
											<td>
												<div className="table-desc">
													<div className="media align-items-center">
														<div className="media-body d-flex">
															<div>
																{/* <h4 className="m-0">{data.laporan.pt.nama}</h4> */}
																<h4 className="m-0">{data.laporan.pt.nama.length > 64 ? data.laporan.pt.nama.substring(0, 64) + "..." : data.laporan.pt.nama}</h4>
																{/* <p className="w-105">{data.keterangan.length > 150 ? data.keterangan.substring(0, 150) + "..." : data.keterangan}</p> */}
																<p className="w-105">{data.keterangan}</p>
															</div>
														</div>
													</div>
												</div>
											</td>
											{/* <td>{moment(data.createdAt).fromNow()}</td> */}
											<td>{data.jawaban?.cabut_sanksi?.status === "Rekomendasi Perbaikan" ?
												<div>
													<div className="badge badge-green">
														Sudah Dijawab
													</div>
													<p className="w-105">Rekomendasi Perbaikan</p>
												</div>
												:
												<div className="badge badge-red">
													Belum Dijawab
												</div>}
											</td>
											<td>
												<div className="ml-auto">
													<Link
														href={{
															pathname: to,
															query: { id: data._id },
														}}
													>
														<Button className="btn-login" color >
															<span className="font-color-white">
																{linkName}
															</span>
														</Button>
													</Link>
												</div>
											</td>
										</tr>
									);
								})
								: ""}
						</tbody>
					</table>
				</Datatable>
			</div>
		</div>
	);
}

export default TableSanksi;