import { RGPDHistory as RGPDHistoryItem } from "../../../../app/config/rgpd.types";
import { DateUtils } from "../../../../app/utils/date";

interface Props {
  history: RGPDHistoryItem[];
}

export default function RGPDHistory({ history }: Props) {
  return (
    <div className="
  bg-white
  rounded-3xl
  p-4
  shadow-sm
  border border-[#dce8e2]
">
      <h3 className="text-lg font-semibold mb-2">
        Historique
      </h3>

      <div className="space-y-4">

        {history.map((item) => (
          <div
            key={item.id}
            className="border-l-3 border-[#2f7d5f] pl-2"
          >
            <div className="font-semibold">
              {item.action}
            </div>

            <div className="text-sm text-gray-500">
              {DateUtils.audit(item.date_action)}
            </div>

            {item.commentaire && (
              <div className="mt-1">
                {item.commentaire}
              </div>
            )}

            <div className="font-semibold">
              {item.utilisateur_nom}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}