import * as React from 'react'
import Link from 'gatsby-link'
import { Layout, Menu, Input, Row, Col } from 'antd'
import SearchInput from './SearchInput'

interface Props {
  currentPathname: string
  before: any
}
interface State {}

export default class extends React.Component<Props, State> {
  render() {
    return (
      <Layout.Header
        style={{
          height: '60px',
          padding: '0',
          backgroundColor: 'inherit',
        }}
      >
        <Menu
          selectedKeys={[this.props.currentPathname]}
          style={{
            lineHeight: '60px',
            height: '60px',
          }}
          theme="dark"
          mode="horizontal"
        >
          <Menu.Item style={{ fontSize: 22 }}>
            <Link to={'/'}>
              <strong style={{ color: 'white' }}>openscript</strong>
              <strong>.run</strong>
            </Link>
          </Menu.Item>
          {this.props.before ? (
            <Menu.Item>{this.props.before}</Menu.Item>
          ) : null}

          <Menu.Item key="/docs/cli/installation" style={{ float: 'right' }}>
            <Link to="/docs/cli/installation">
              <strong>Getting started</strong>
            </Link>
          </Menu.Item>
          <Menu.Item style={{ float: 'right' }}>
            <Link to="/docs">
              <strong>Docs</strong>
            </Link>
          </Menu.Item>
        </Menu>
      </Layout.Header>
    )
  }
}
