import PropTypes from 'prop-types';
import styled from 'styled-components';

const Root = styled.strong`
  display: block;
  margin-bottom: 12px;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: ${props => (props.color ? props.color : props.theme.colors.primaryPalette.v400)};
  text-transform: uppercase;

  ${props =>
    props.large &&
    `
    font-size: 18px;
  `};

  &[data-id*='marketing-manager'] {
    color: #ff9673;
  }
  &[data-id*='developer'] {
    color: #50babe;
  }
  &[data-id*='dpo'] {
    color: #4c74c1;
  }
  &[data-id*='sdk-mobile'] {
    color: ${props => props.theme.colors.primaryPalette.v400};
  }
`;

const Toptitle = ({ children, dataId, color, large }) => (
  <Root role="doc-subtitle" data-id={dataId} color={color} large={large}>
    {children}
  </Root>
);

Toptitle.propTypes = {
  children: PropTypes.any,
  dataId: PropTypes.string,
  color: PropTypes.string,
  large: PropTypes.bool
};

export default Toptitle;