import React from "react";
import TextareaAutosize from "react-textarea-autosize";
import { Converter } from "showdown";

const converter = new Converter();

export default class FormatText extends React.Component {
  render() {
    const str = `<eventitem date="${this.props.date}" time="${
      this.props.time
    }" room="Online" title="${this.props.name}">
    <short>
      ${converter.makeHtml(this.props.abstract)}
    </short>
    <abstract>
      ${converter.makeHtml(this.props.description)}
    </abstract>
  </eventitem>`;
    return (
      <div className="formatted-text">
        <h2>formatted text:</h2>
        <TextareaAutosize
          style={{ width: "24em", padding: "1vh 1.5vw" }}
          minRows={3}
          maxRows={20}
          value={str}
        />
      </div>
    );
  }
}