import PropTypes from 'prop-types';
import horizontalLogo from './horizontal.svg';
import stackedLogo from './stacked.svg';
import classes from './styles.module.scss';

/**
 * This component renders our election product logo. It can render it in either
 * a wide form or a condensed square form, based on the `shape` prop.
 */
const ProductLogo = function ProductLogo(props) {
  const {
    shape
  } = props;
  const logoURL = {
    horizontal: horizontalLogo,
    square: stackedLogo
  };
  const img = logoURL[shape] || logoURL.horizontal;
  return <img className={classes.logo} src={img.src} alt="2024 elections logo" />;
};
ProductLogo.defaultProps = {
  shape: 'horizontal'
};
ProductLogo.propTypes = {
  /**
   * The shape of the logo, either `horizontal` for when you have lots of
   * horizontal space or `square` for when you need a more condensed logo.
   */
  shape: PropTypes.oneOf(['horizontal', 'square'])
};
export default ProductLogo;