import React from 'react';
import styled from 'styled-components';
import remcalc from 'remcalc';

import { H2 } from '../text/headings';
import { Chevron } from '../icons';

const Name = H2.extend`
  color: ${props => props.theme.primary};
  margin: ${remcalc(12)} 0;
`;

const Arrow = styled(Chevron)`
  margin: ${remcalc(8)} ${remcalc(10)} ${remcalc(3)} ${remcalc(10)};
`;

const Container = styled.div`
  display: inline-flex;
  align-items: center;
`;

const BaseLink = styled(({ component, children, ...rest }) =>
  React.createElement(component, rest, children)
)`
  text-decoration: none;
  cursor: pointer;

  &:visited {
    color: inherit;
  }
`;

export default ({ children, component, ...rest }) => {
  const _child = component ? (
    <BaseLink {...rest} component={component}>
      {children}
    </BaseLink>
  ) : (
    children
  );

  return (
    <Container>
      <Name name="breadcrum-item">{_child}</Name>
      <Arrow />
    </Container>
  );
};