import * as React from 'react';

export interface AuditTimelineEntry {
  actor: string;
  action: string;
  module: string;
  at: string;
  detail: string;
}

export interface AuditTimelineProps {
  entries: AuditTimelineEntry[];
}

export function AuditTimeline({ entries }: AuditTimelineProps) {
  return (
    <div className="space-y-3">
      {entries.map((entry) => (
        <article key={`${entry.actor}-${entry.at}-${entry.action}`} className="rounded-[1.4rem] border border-slate-200 bg-white p-4">
          <div className="flex flex-col gap-2 md:flex-row md:items-start md:justify-between">
            <div>
              <p className="text-sm font-black text-slate-900">{entry.action}</p>
              <p className="mt-1 text-sm text-slate-500">
                {entry.actor} em {entry.module}
              </p>
            </div>
            <p className="text-[11px] font-bold uppercase tracking-[0.18em] text-slate-400">{entry.at}</p>
          </div>
          <p className="mt-3 text-sm leading-6 text-slate-600">{entry.detail}</p>
        </article>
      ))}
    </div>
  );
}