import { AuditLog } from "./types";

type AuditLogSectionProps = {
    logs: AuditLog[];
};

export default function AuditLogSection({ logs }: AuditLogSectionProps) {
    return (
        <section className="space-y-4">
            <h2 className="text-lg tracking-wide">Audit Log</h2>
            <div className="overflow-x-auto border border-border/70">
                <table className="w-full text-left text-sm">
                    <thead className="bg-black/5 text-foreground/70">
                        <tr>
                            <th className="px-3 py-2">Time</th>
                            <th className="px-3 py-2">Actor</th>
                            <th className="px-3 py-2">Action</th>
                            <th className="px-3 py-2">Summary</th>
                        </tr>
                    </thead>
                    <tbody>
                        {logs.map((log) => (
                            <tr key={log._id} className="border-t border-border/50">
                                <td className="px-3 py-2 text-xs text-foreground/70">{log.createdAt ? new Date(log.createdAt).toLocaleString() : "-"}</td>
                                <td className="px-3 py-2">{log.actor?.username || "system"}</td>
                                <td className="px-3 py-2 font-mono text-xs">{log.action}</td>
                                <td className="px-3 py-2">{log.summary || `${log.targetType || "target"}:${log.targetId || "-"}`}</td>
                            </tr>
                        ))}
                    </tbody>
                </table>
            </div>
        </section>
    );
}