import { h } from 'preact'
import { Link as ReactLink } from 'react-router-dom'
import { RightBox, StyledRow as Row } from './styles'
import { ImageLogo } from '../Logo'
import Link from '../Link'

import navigation from '../../data/navigation'
import { colours, textSizes } from '../../assets/theme'

const Navigation = ({ theme = {}, lang = 'en' }) => (
  <RightBox as="nav">
    {navigation[lang].map(navItem => <Link navLink to={navItem.to} href={navItem.href} textProps={{
      size: textSizes.xl, colour: theme.foreground || colours.rose
    }}>{navItem.label}</Link>)}
  </RightBox>
)


const BigHeader = ({ theme = {}, lang = 'en', ...rest }) => (
  <Row theme={theme} align="center" justify="space-between" {...rest}>
    <ReactLink to="/">
      <ImageLogo />
    </ReactLink>
    <Navigation theme={theme} lang={lang} {...rest} />
  </Row>
)

const MiniHeader = ({ theme = {}, lang = 'en', ...rest }) => (
  <Row theme={theme} align="center" justify="space-between" miniHeader {...rest}>
    <Navigation theme={theme} lang={lang} {...rest} />
  </Row>
)

const Header = ({ miniHeader, ...rest }) => miniHeader ? <MiniHeader {...rest} /> : <BigHeader {...rest} />

export default Header