// @flow
import React from 'react';
import styled from 'styled-components';
import type { SideBarProps } 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) => {
  const { text, ...rest } = props;
  return (
    <MaxWidthBox spacing="m4" {...rest}>
      <Info spacing="mb2" />
      <Head4 spacing={['mb2', 'mt2']}>{props.title}</Head4>
      {text.map((t) => (
        <Box spacing="mb1" key={t}>
          <Span fontSize="f2" colorName="greyscale-black">
            {t}
          </Span>
        </Box>
      ))}
    </MaxWidthBox>
  );
};

SideBar.displayName = 'SideBar';
