import React from 'react'

import { Box } from '../Box'
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 (
    <Box
      className={`ViewFrame ${props.className}`}
      direction='column'
      background='#f4f6f9'
      width='100%'
      height='100%'
    >
      <Box className='header' alignItems='center'>
        <OrchatectIcon marginRight='24px' />
        <Heading size={2}>{props.bundleTitle}</Heading>
      </Box>
      <Box className='body'>
        <Navigation links={props.links} bottomLinks={props.bottomLinks} />
        <Box className='right' direction='column'>
          <Heading size={3}>{props.viewTitle}</Heading>
          <Spacer marginBottom='24px' />
          {props.children}
        </Box>
      </Box>
    </Box>
  )
}

ViewFrame.defaultProps = {
  className: ''
}