import React from "react";

let capitalizeFirstLetter = (string) =>
  string.charAt(0).toUpperCase() + string.slice(1);

export function DisplayElement({ element }) {
  let otherkeys = Object.keys(element).filter(
    (key) =>
      key != "name" && key != "url" && key != "id" && key != "isReferenceValue"
  );
  let othervalues = otherkeys.map((key) => element[key]);
  let otherpairs = otherkeys.map((key, i) => ({
    key: capitalizeFirstLetter(key),
    value: othervalues[i],
  }));

  if (element.url) {
    return (
      <div>
        {/*<a href={element.url} target="_blank">*/}
        <h2>{`${element.name}`}</h2>
        {/*</a>*/}
        {otherpairs.map((pair) => (
          <p key={pair.value}>{`${pair.key}: ${pair.value}`}</p>
        ))}
        <p>
          <a href={element.url} target="_blank">
            More info
          </a>
        </p>
      </div>
    );
  } else {
    return (
      <div>
        <h2>{`${element.name}`}</h2>
        {otherpairs.map((pair) => (
          <p key={pair.value}>{`${pair.key}: ${pair.value}`}</p>
        ))}
      </div>
    );
  }
}