import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import commonMessages from '@doodle/common-messages';
import { translate } from '../../utils/translate';

const Separator = () => <span className="ProductFooter__separator">•</span>;

const ProductFooter = ({ intl, variant }) => {
  const componentClassName = classnames('ProductFooter', {
    [`ProductFooter--${variant}`]: variant,
  });

  return (
    <footer className={componentClassName}>
      <a
        className="ProductFooter__link"
        href={translate(commonMessages.urlHelp, intl)}
        target="_blank"
        rel="noopener noreferrer"
      >
        {translate(commonMessages.help, intl)}
      </a>
      <Separator />
      <a
        className="ProductFooter__link"
        href={translate(commonMessages.urlPrivacy, intl)}
        target="_blank"
        rel="noopener noreferrer"
      >
        {translate(commonMessages.privacy, intl)}
      </a>
      <Separator />
      <a
        className="ProductFooter__link"
        href={translate(commonMessages.urlTermsAndConditions, intl)}
        target="_blank"
        rel="noopener noreferrer"
      >
        {translate(commonMessages.termsOfService, intl)}
      </a>
    </footer>
  );
};

export const ProductFooterTypes = {
  /** An object used for internationalization. */
  intl: PropTypes.object,
  /** Variant of the footer */
  variant: PropTypes.oneOf(['light', 'dark', 'transparent']),
};

ProductFooter.propTypes = ProductFooterTypes;

ProductFooter.defaultProps = {
  intl: null,
  variant: 'light',
};

export default ProductFooter;