import React from "react";
import classNames from "classnames";
import { BoxProps } from "../Box";
import { Flex } from "../Flex";
import { Icon, ICON_TYPE } from "../Icon";
import { Text } from "../Text";
import { bem } from "../../utilities/bem";

const cn = "PropertyDiff";

export interface PropertyDiffProps extends BoxProps {
  property?: string;
  oldValue?: string;
  newValue?: string;
}

export const PropertyDiff = (props: PropertyDiffProps) => {
  const { property, oldValue, newValue, className, ...rest } = props;

  return (
    <Flex className={classNames(bem(cn), className)} {...rest}>
      {property && (
        <Text as="div" className={bem(cn, { e: "property" })}>
          {property}
        </Text>
      )}

      {oldValue && (
        <Text as="div" className={bem(cn, { e: "oldValue" })}>
          {oldValue}
        </Text>
      )}

      {oldValue && newValue && (
        <Icon
          className={bem(cn, { e: "icon" })}
          icon={ICON_TYPE.LONG_ARROW_ALT_RIGHT}
        />
      )}

      {newValue && (
        <Text as="div" className={bem(cn, { e: "newValue" })}>
          {newValue}
        </Text>
      )}
    </Flex>
  );
};