import Meta from 'components/elements/Meta/Meta'
import HeadingBase from 'components/elements/Heading'
import Box from 'components/elements/Box'
import { withTitle } from 'helpers/hoc/with-title'
import Caption from 'components/patterns/Caption/Caption'
import Layout from 'components/patterns/Layout'
import Flex from 'components/elements/Flex'
import Markdown from 'components/markdown'
import { layout, theme } from 'theme'
import React from 'react'

import Content from '../content/fragments/changelog.md'

const Heading = withTitle(HeadingBase)

export const Head = () => (
  <Meta description='We’re constantly improving the platform. See here notable changes in our lineup of products & improvements over the time.' />
)

const ChangelogPage = () => {
  return (
    <Layout>
      <Flex
        css={theme({
          flexDirection: 'column',
          alignItems: 'center'
        })}
      >
        <Heading css={{ maxWidth: layout.large }}>Changelog</Heading>
        <Caption
          forwardedAs='h2'
          css={theme({
            pt: [3, null, 4],
            mb: ['-16px', null, '-32px'],
            px: [4, null, 0],
            maxWidth: layout.small
          })}
        >
          We’re constantly improving the platform. See here notable changes in
          our lineup of products & improvements over the time.
        </Caption>
        <Box css={theme({ pt: [3, null, 4] })}>
          <Markdown>
            <Content />
          </Markdown>
        </Box>
      </Flex>
    </Layout>
  )
}

export default ChangelogPage
