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">
				{listData && (
					<Datatable options={{ responsive: false, ordering: true }}>
						<table className="table w-100" >
							<thead>
								<tr>
									<th>Nomor Sanksi</th>
									<th>Keterangan Sanksi</th>
									{/* {listData?.user.nama && <th>Dibuat Oleh</th>} */}
									{/* <th>Created</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>
																<h4>{data.no_sanksi}</h4>
																<p>{moment(data.createdAt).format("DD-MM-YYYY")}</p>
															</div>
														</div>
													</div>
												</td>
												<td>
													<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 > 25 ? data.laporan.pt.nama.substring(0, 25) + "..." : data.laporan.pt.nama}</h4>
																<p>{data.keterangan.length > 30 ? data.keterangan.substring(0, 30) + "..." : data.keterangan}</p>
															</div>
														</div>
													</div>
												</td>
												{/* <td>{moment(data.createdAt).fromNow()}</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;