import React from 'react'

import Box from 'ui-box'
import { Text } from '../Text'
import { Spacer } from '../Spacer'
import { Link as _Link } from '../Link'

const Link = (props) => {
  return (
    <_Link className="NavigationLink" onClick={props.onClick}>
      <ion-icon name={props.icon}></ion-icon>
      <span>{props.label}</span>
    </_Link>
  )
}

const BottomLink = (props) => {
  return (
    <_Link className="NavigationBottomLink" onClick={props.onClick}>
      <ion-icon name={props.icon}></ion-icon>
      <span>{props.label}</span>
    </_Link>
  )
}

export const Navigation = (props) => {
  return (
    <div className="Navigation">
      <Text size="small" style={{ marginLeft: "24px", marginTop: '12px' }}>Navigation</Text>
      <For each="link" of={props.links} index="index">
        <Link {...link} index={index} key={link.label} />
      </For>
      <If condition={props.bottomLinks}>
        <div style={{ marginBottom: '48px' }} />
        <For each="link" of={props.bottomLinks} index="index">
          <BottomLink {...link} index={index} key={link.label} />
        </For>
      </If>
    </div>
  )
}