import React from 'react'
import styled from 'styled-components'
import DocsLayout from '../components/DocsLayout'
import { getReleases } from '../utils/githubApi'
import md from '../components/md'
import Anchor from '../components/Anchor'
import Loading from '../components/Loading'
import rem from '../utils/rem'
import { getFormattedDate } from '../utils/dates'


const ReleaseName = styled.span`
  margin-top: ${rem(40)};
  margin-bottom: ${rem(-20)};
  display: block;
`

const Date = styled.span`
  display: block;
  color: rgb(243, 182, 97);
  font-size: 16px;
  margin-top: ${rem(-5)};
`

const Releases = ({ releases, sidebarPages }) => (
  <DocsLayout
    useDocsSidebarMenu={false}
    pages={sidebarPages}
    title="Releases"
    description="Styled Components Releases"
  >
    {md`
      Updating styled components is usually as simple as \`npm install\`. Only major versions have the potential to introduce breaking changes (noted in the following release notes).
    `}
    {releases ? releases.map(release =>
      <section key={release.id}>
        <Anchor id={release.name}>
          <ReleaseName>{release.name} <Date>{getFormattedDate(release.created_at)}</Date></ReleaseName>
        </Anchor>
        {md(release.body, release.name, 3)}
      </section>
    ) : <Loading />}
  </DocsLayout>
)

Releases.getInitialProps = async () => {
  const releases = await getReleases()
  return {
    releases,
    sidebarPages: releases.map(release => ({ title: release.name, href: release.name }))
  }
}

export default Releases

@@ -58,16 +58,50 @@
 onents'%0A
+import MDX from '@mdx-js/runtime'%0A
 import D
@@ -142,16 +142,16 @@
 Layout'%0A
-
 import %7B
@@ -195,42 +195,8 @@
 pi'%0A
-import md from '../components/md'%0A
 impo
@@ -358,16 +358,65 @@
 /dates'%0A
+import components from '../utils/mdx-components'%0A
 %0A%0Aconst 
@@ -838,19 +838,37 @@
     
-%7Bmd%60%0A      
+%3CMDX components=%7Bcomponents%7D%3E
 Upda
@@ -1043,15 +1043,14 @@
 es).
-%0A    %60%7D
+%3C/MDX%3E
 %0A   
@@ -1288,43 +1288,57 @@
     
-%7Bmd(release.body, release.name, 3)%7D
+%3CMDX components=%7Bcomponents%7D%3E%7Brelease.body%7D%3C/MDX%3E
 %0A   

MOve pages/releases to mdx runtime, remove components/md!!!