import Datatable from "@/components/Tables/Datatable";
import moment from "moment";
import { Card, CardHeader, CardBody, CardTitle } from "reactstrap";

function Riwayat({ data }) {
	return (
		<Card className="card-default">
			<CardHeader>
				<CardTitle>Riwayat</CardTitle>
			</CardHeader>
			<CardBody>
				<Datatable options={{ responsive: true }}>
					<table className="table table-striped my-4 w-100">
						<thead>
							<tr>
								<th>Tanggal</th>
								<th>Dokumen</th>
							</tr>
						</thead>
						<tbody>
							{data.length ? (
								data.map((value) => (
									<tr>
										<td>{moment(value.createAt).format("DD MMMM YYYY")}</td>
										<td>
											{value.files.map((e) => (
												<>
													<em className="fa-lg far fa-file-code"></em>
													<a className="text-muted" href={`data:${e.type};base64, ${Buffer.from(e.data).toString("base64")}`} download={e.name}>
														{e.name}
													</a>
												</>
											))}
										</td>
									</tr>
								))
							) : data ? (
								<tr>
									<td>{moment(data.createAt).format("DD MMMM YYYY")}</td>
									<td>
										{data.files.map((e) => (
											<>
												<em className="fa-lg far fa-file-code"></em>
												<a className="text-muted" href={`data:${e.type};base64, ${Buffer.from(e.data).toString("base64")}`} download={e.name}>
													{e.name}
												</a>
											</>
										))}
									</td>
								</tr>
							) : (
								""
							)}
						</tbody>
					</table>
				</Datatable>
			</CardBody>
		</Card>
	);
}

export default Riwayat;