import type React from "react";

type Props = {
	headers: React.ReactNode[];
	children: React.ReactNode;
};

export default function DataTable({ headers, children }: Props) {
	return (
		<div className="overflow-x-auto border-2 border-brand-600 rounded-xl">
			<table className="min-w-full divide-y divide-gray-400 border-collapse">
				<thead className="bg-gray-50">
					<tr>
						{headers.map((header, i) => (
							<th
								key={i}
								scope="col"
								className="px-6 py-3 text-left font-medium text-gray-800"
							>
								{header}
							</th>
						))}
					</tr>
				</thead>
				<tbody className="bg-white divide-y divide-gray-300">{children}</tbody>
			</table>
		</div>
	);
}

export function DataTableCell({ children }: { children: React.ReactNode }) {
	return (
		<td className="px-6 py-4 whitespace-nowrap text-gray-900">{children}</td>
	);
}

export function formatUnixTimestamp(timestamp: number): string {
	const date = new Date(timestamp * 1000);
	const year = date.getFullYear();
	const month = (date.getMonth() + 1).toString().padStart(2, "0");
	const day = date.getDate().toString().padStart(2, "0");
	const hours = date.getHours().toString().padStart(2, "0");
	const minutes = date.getMinutes().toString().padStart(2, "0");
	return `${year}-${month}-${day} ${hours}:${minutes}`;
}