const Article = () => (
    <article className="article">
        <section className="header"><span>📁 Document</span><span className="date">8 Dec 2018</span></section>
        <img alt="article preview" src="static/monkey.jpg" />
        <section className="content">
        <section className="interactions">
            <ul><li>👍 3</li><li>👎 5</li><li>💬 1</li></ul><a href="google.com"><span>📊</span></a>
        </section>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
        <div className="progress" />
        </section>
        <style jsx>{`
            ul {
                list-style: none;
                display: flex;
                flex-direction: row;
                align-items: center;
                margin: 0;
                padding: 0;
            }
            li {
                margin-right: 1rem;
            }
            .date {
               color: var(--grey-4);
            }
           .article {
                display: flex;
                flex-direction: column;
                box-shadow: 6px 10px 14px rgba(0,0,0,0.10);
                background-color: white;
                border-radius: var(--border-radius);
           }
           span {
               display: block;
           }
           .header {
               display: flex;
               flex-direction: row;
               justify-content: space-between;
               padding: 1.5rem;
               align-items: center;
               line-height: 1.5;
               vertical-align: middle;
           }
           .content {
               padding: 1.5rem;
           }
           img {
               width: 100%;
               max-height: 250px;
               object-fit: cover;
               object-position: 0 0;
           }
           .interactions {
               display: flex;
               flex-direction: row;
               justify-content: space-between;
           }
           p {
               margin: 0;
               padding: 1rem 0;
               line-height: 1.5;
           }
           .progress {
               height: 2px;
               background-color: var(--brand-3);
               width: 80px;
               align-self: flex-start;
               justify-self: flex-start;
           }
        `}</style>
    </article>
)

export default Article;