import React, { Component } from 'react';
import { Comments } from './comments';

//TODO ask for note if we don't have it
//TODO initialise note if no state

//TODO if comments are disabled on the notebook, don't render comments
export class Note extends Component {
  render() {
    return (


      <div className="flex justify-center mt4 ph4 pb4">
        <div className="w-100 mw6">
          <div className="flex flex-column">
            <h7 className="f9 mb1">Title</h7>
            <div className="flex">
            <div className="di f9 mono gray2 mr2">Author</div>
            <div className="di f9 gray2">11d ago</div>
            </div>
          </div>

          <p className="f9 mt7 mb12">
            I dreamt of urbit hardware - stars and galaxies and planets had differing forms and size - solid and friendly forms, non-illuminated, state clear, stone-like, -henge-like
          </p>

          <div className="flex mt4">
            <a href="" className="di flex-column w-50 pv6 bt br bb b--gray4">
              <div className="f9 gray2 mb2">Previous</div>
              <div className="f9 mb1">%loud</div>
              <div className="f9 gray2">14d ago</div>
            </span>
            <a href="" className="di flex-column tr w-50 pv6 bt bb b--gray4">
            <div className="f9 gray2 mb2">Next</div>
            <div className="f9 mb1">+advent of %code ~2019.12</div>
            <div className="f9 gray2">6d ago</div>
            </div>
          </div>


        </div>
      </div>
    )
  }
}

export default Note

@@ -330,16 +330,34 @@
 -center 
+overflow-y-scroll 
 mt4 ph4 
@@ -358,24 +358,24 @@
 4 ph4 pb4%22%3E%0A
-
         %3Cdiv
@@ -714,16 +714,25 @@
 mt7 mb12
+ lh-solid
 %22%3E%0A     
@@ -1028,33 +1028,33 @@
 bt br bb b--gray
-4
+3
 %22%3E%0A             
@@ -1297,17 +1297,17 @@
  b--gray
-4
+3
 %22%3E%0A     
@@ -1510,16 +1510,421 @@
 %3C/div%3E%0A%0A
+          %3Cform class=%22mt8%22%3E%0A            %3Cdiv%3E%0A              %3Ctextarea id=%22comment%22 name=%22comment%22 placeHolder=%22Leave a comment here%22 class=%22f9 db border-box hover-black w-100 ba b--gray3 pt3 ph3 pb8 br1 mb2%22 aria-describedby=%22comment-desc%22%3E%3C/textarea%3E%0A            %3C/div%3E%0A            %3Cbutton className=%22f9 pa2 bg-white ba b--gray2 gray2%22%3E%0A              Add comment%0A            %3C/button%3E%0A          %3C/form%3E%0A
 %0A       

add comment box