import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { textSize } from 'Themes/utils/fontPickers';
import { grayColor } from 'Themes/utils/colorPickers';
import { screenSize } from 'Themes/utils/mediaQueries';

export const CardItemHeaderMobile = styled.span`
  display: block;
  font-size: ${textSize('S')};
  font-weight: bold;
  color: ${grayColor};
  margin: 8px 16px 8px 0;

  @media ${screenSize('desktop')} {
    display: none;
  }
`;

export const BaseStyledHeader = styled.span`
  display: inline;
  margin: 0 16px;
  flex-basis: 20%;
`;

const CardItemHeader = ({ type, label }) => {
  let StyledHeaderComponent = CardItemHeader.templates.default;

  if (CardItemHeader.templates[type]) {
    StyledHeaderComponent = CardItemHeader.templates[type];
  }

  return <StyledHeaderComponent>{label}</StyledHeaderComponent>;
};

CardItemHeader.propTypes = {
  type: PropTypes.string.isRequired,
  label: PropTypes.string.isRequired,
};

CardItemHeader.displayName = 'CardItemHeader';

CardItemHeader.templates = {
  default: BaseStyledHeader,
};

CardItemHeader.addTemplates = templates => {
  CardItemHeader.templates = {
    ...CardItemHeader.templates,
    ...templates,
  };
};

export default CardItemHeader;
