// @flow
import React from 'react';
import styled from 'styled-components';
import type { SideBarProps } from './side-bar.proptypes';
import { sideBarPropTypes } from './side-bar.proptypes';
import { Box } from '../../primitives';
import { Head4, Span } from '../../core/typography';
import { Info } from '../../core/icon';

const MaxWidthBox = styled(Box)`
  max-width: 200px;
`;

export const SideBar = (props: SideBarProps) => (
  <MaxWidthBox spacing="m4">
    <Info spacing="mb2" />
    <Head4 spacing={['mb2', 'mt2']}>{props.title}</Head4>
    {props.text.map(text => (
      <Box spacing="mb1" key={text}>
        <Span fontSize="f2" colorName="greyscale-black">
          {text}
        </Span>
      </Box>
    ))}
  </MaxWidthBox>
);

SideBar.displayName = 'SideBar';
SideBar.propTypes = sideBarPropTypes;
