import { DateUtils } from "../../../app/utils/date";

interface ActivityRow {
    id: number;
    nom_utilisateur: string;
    action: string;
    module: string;
    created_at: string;
}

export default function ActivityTable({ logs }: { logs: ActivityRow[] }) {
    return (
        <div className="overflow-x-auto rounded-xl border border-[#e6efe9] bg-white shadow-sm">
            <table className="w-full text-sm">
                <thead className="sticky top-0 z-10">
                    <tr className="bg-gradient-to-r from-[#f4f8f6] to-[#eef6f2] text-[#2f5d4b] border-b border-[#e6efe9]">
                        <th className="text-left px-6 py-4 font-semibold tracking-wide">
                            Utilisateur
                        </th>

                        <th className="text-left px-6 py-4 font-semibold tracking-wide">
                            Action
                        </th>

                        <th className="text-left px-6 py-4 font-semibold tracking-wide">
                            Module
                        </th>

                        <th className="text-left px-6 py-4 font-semibold tracking-wide">
                            Date
                        </th>
                    </tr>
                </thead>

                <tbody className="divide-y divide-[#eef3f0]">
                    {logs.map(log => (
                        <tr
                            key={log.id}
                            className="
            transition
            hover:bg-[#f3faf7]
            bg-[#fcfdfc]
          "
                        >

                            <td className="px-6 py-4 font-medium text-[#1f5f4a]">
                                {log.nom_utilisateur}
                            </td>

                            <td className="px-6 py-4 text-[#3f6f60]">
                                {log.action}
                            </td>

                            <td className="px-4 py-4">
                                {log.module}
                            </td>

                            <td className="px-6 py-4 text-[#6b7f77] whitespace-nowrap">
                                {DateUtils.audit(log.created_at)}
                            </td>

                        </tr>
                    ))}
                </tbody>
            </table>
        </div>
    );
}