// Packages
import React from 'react';
import css from 'next/css';

const generateClassNames = (styleOne, styleTwo) => {
  if (styleTwo !== null && styleTwo !== undefined) {
    return `${styleOne} ${styleTwo}`;
  }
  return styleOne;
};

export default ({href, title, children, color, hoverColor, fontSize, className}) => {
  const style = css({
    color: color || '#000',
    fontSize: fontSize || '10pt',
    ':hover': {
      color: hoverColor || '#81D4FA'
    }
  });
  const classNames = generateClassNames(style, className);
  return (
    <a href={href} title={title} className={classNames} target="_blank">{children}</a>
  );
};