import React from 'react';
import PropTypes from 'prop-types';

import { StyledMarker, StyledLabel } from './Marker.style';

const Marker = ({ title, label, isOnlyMarker, zoomLevel, defaultZoom }) => {
  const closeEnough = zoomLevel > defaultZoom;
  return (
    <StyledMarker isOnlyMarker={isOnlyMarker || !closeEnough}>
      {!isOnlyMarker && closeEnough && label}
      {closeEnough && (
        <StyledLabel isOnlyMarker={isOnlyMarker}>{title}</StyledLabel>
      )}
    </StyledMarker>
  );
};

Marker.propTypes = {
  label: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  title: PropTypes.string,
  isOnlyMarker: PropTypes.bool,
  zoomLevel: PropTypes.number,
  defaultZoom: PropTypes.number,
};

Marker.defaultProps = {
  isOnlyMarker: false,
  title: '',
  label: '',
  zoomLevel: 6,
  defaultZoom: 4,
};

export default Marker;