import React from 'react'

import { Text } from '../Text'
import { Heading } from '../Heading'
import { OrchatectIcon } from '../OrchatectIcon'
import { Navigation } from '../Navigation'
import { Spacer } from '../Spacer'

import './ViewFrame.css'

export const ViewFrame = (props) => {
  return (
    <div className={`ViewFrame ${props.className}`}>
      <div className='header'>
        <OrchatectIcon />
        <div style={{ marginRight: '24px' }} />
        <Heading size={3}>{props.bundleTitle}</Heading>
        <div style={{ marginBottom: '24px' }} />
      </div>
      <div className='body'>
        <Navigation links={props.links} bottomLinks={props.bottomLinks} />
        <div className='right' direction='column'>
          <Heading size={5}>{props.viewTitle}</Heading>
          <div style={{ marginBottom: '24px' }} />
          {props.children}
        </div>
      </div>
    </div>
  )
}

ViewFrame.defaultProps = {
  className: ''
}