const StyledButton = styled.default.button`
  background: ${props => props.primary ? 'blue' : 'grey'};
  color: white;
  font-size: 12px;
  padding: 1rem;
  font-family: sans-serif;
  border-radius: 5px;
  text-align: center;
  margin: 5px;
  border: ${props => props.outline ? '3px solid black' : 'none'};
  &:hover {
    cursor: pointer;
  }
`;

const StyledLink = styled.default.a`
  background: ${props => props.primary ? 'blue' : 'grey'};
  color: white;
  text-decoration: none;
  font-size: 12px;
  padding: 1rem;
  font-family: sans-serif;
  border-radius: 5px;
  text-align: center;
  margin: 5px;
  border: ${props => props.outline ? '3px solid black' : 'none'};
`;

const Button = ({ primary, outline, href, text }) => (
  href
    ? <StyledLink primary={primary} outline={outline} href={href}>
        {text}
      </StyledLink>
    : <StyledButton primary={primary} outline={outline}>
        {text}
      </StyledButton>
);

const Demo = () => (
  <div style={{ display: 'flex', flexDirection: 'column' }}>
    <Button primary outline href='https://spectrum.chat/' text='Primary Link w/ Outline'/>
    <Button href='https://spectrum.chat/' text='Link w/o Outline'/>
    <Button primary text='Primary Button w/o Outline'/>
    <Button outline text='Button w/ Outline'/>
  </div>
);

ReactDOM.render(<Demo />, document.getElementById('root'));