import React from "react";
import { List } from "antd";
import Icon from "@ant-design/icons";
import { FaArrowRight } from "react-icons/fa";

export default function AuditTrailValuesComponent({ oldV, newV }) {
  if (!oldV && !newV) return <div></div>;

  if (!oldV && newV)
    return (
      <List style={{ width: "800px" }} bordered size="small">
        {Object.keys(newV).map((key, idx) => (
          <List.Item key={idx} value={key}>
            {key}: {JSON.stringify(newV[key])}
          </List.Item>
        ))}
      </List>
    );

  return (
    <List style={{ width: "800px" }} bordered size="small">
      {Object.keys(oldV).map((key, idx) => (
        <List.Item key={idx}>
          {key}: {oldV[key]} <Icon component={FaArrowRight} />
          {JSON.stringify(newV[key])}
        </List.Item>
      ))}
    </List>
  );
}