import React from 'react'

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

import './Navigation.css'

const Link = (props) => {
  return (
    <Box className="NavigationLink" display="flex" cursor="pointer" paddingTop="12px" marginBottom="12px" marginX="24px" fontWeight="700">
      {props.label}
    </Box>
  )
}

const BottomLink = (props) => {
  return (
    <Box className="NavigationBottomLink" display="flex" cursor="pointer" paddingTop="12px" marginBottom="12px" marginX="24px" fontWeight="400">
      {props.label}
    </Box>
  )
}

export const Navigation = (props) => {
  return (
    <Box className="Navigation" paddingY="12px" paddingBottom="24px" display="flex" flexDirection="column" minWidth="280px" borderRadius="6px" background="white" boxShadow="var(--depth1)">
      <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}>
        <Spacer marginTop="48px" />
        <For each="link" of={props.bottomLinks} index="index">
          <BottomLink {...link} index={index} key={link.label} />
        </For>
      </If>
    </Box>
  )
}