import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import space from 'Components/utils/styles/space';
import linkTypes from 'Components/utils/types/linkTypes';
import { linkColor } from 'Themes/utils/colorPickers';

const StyledLink = styled.a`
  text-decoration: none;
  color: ${linkColor};
  ${space}

  :hover {
    color: ${linkColor[0.6]};
  }
`;

const getHref = (type, href) => {
  switch (type) {
    case 'phone':
      return `tel:${href}`;
    case 'email':
      return `mailto:${href}`;
    default:
      return href;
  }
};

const Link = ({ children, type, href, ...props }) => {
  return (
    <StyledLink href={getHref(type, href)} {...props}>
      {children}
    </StyledLink>
  );
};

Link.propTypes = {
  type: PropTypes.oneOf(linkTypes),
  href: PropTypes.string.isRequired,
};

Link.defaultProps = {
  type: 'link',
};

Link.displayName = 'Link';

export default Link;
