import moment from "moment";
import { Button, Table } from "reactstrap";
import Link from "next/link";

function TableSanksi({ listData, to, linkName }) {
	return (
		<div className="card b">
			<div className="card-body card-over">
				<Table className="table w-100">
					<thead>
						<tr>
							<th>Nomor Sanksi</th>
							<th>Keterangan Sanksi</th>
							<th>Created</th>
							<th>Status</th>
						</tr>
					</thead>
					<tbody>
						{listData.map((data) => {
							return (
								<tr key={data._id}>
									<td>{data.sanksi.no_sanksi}</td>
									<td>
										<div className="table-desc">
											<div className="media align-items-center">
												{/* <img className="img-fluid rounded thumb64" src="/static/img/dummy-search.png" alt="Dummy" /> */}
												<div className="media-body d-flex">
													<div>
														<h4 className="m-0">{data.pt.nama}</h4>
														{/* <small className="text-muted">0742/O/1990 - www.satyagama.ac.id - info@satyagama.ac.id</small> */}
														{/* <p className="w-105">{data.sanksi.description.length > 150 ? data.sanksi.description.substring(0, 150) + "..." : data.sanksi.description}</p> */}
														<p className="w-105">{data.keterangan}</p>
													</div>
												</div>
											</div>
										</div>
									</td>
									<td>{moment(data.sanksi.createdAt).format("DD MMMM YYYY")}</td>
									<td>
										{data.sanksi.cabut_sanksi?.jawaban ? (
											<Link href={{ pathname: to, query: { noSanksi: data.sanksi.no_sanksi } }}>
												<Button color="primary">{linkName}</Button>
											</Link>
										) : (
											<div className="badge-info badge">Menunggu Jawaban</div>
										)}
									</td>
								</tr>
							);
						})}
					</tbody>
				</Table>
			</div>
		</div>
	);
}

export default TableSanksi;