import React from 'react';
import { Icon } from 'component/common.js';

const Link = props => {
	const {
		href,
		title,
		onClick,
		style,
		label,
		icon,
		badge,
		button,
		hidden,
		disabled,
		children
	} = props;

	const className =
		(props.className || '') +
		(!props.className && !props.button ? 'button-text' : '') + // Non-button links get the same look as text buttons
		(props.button
			? ' button-block button-' + props.button + ' button-set-item'
			: '') +
		(props.disabled ? ' disabled' : '');

	let content;
	if (children) {
		content = children;
	} else {
		content = (
			<span {...('button' in props ? { className: 'button__content' } : {})}>
				{'icon' in props ? <Icon icon={icon} fixed={true} /> : null}
				{label ? <span className="link-label">{label}</span> : null}
				{'badge' in props ? <span className="badge">{badge}</span> : null}
			</span>
		);
	}

	return (
		<a
			className={className}
			href={href || 'javascript:;'}
			title={title}
			onClick={onClick}
			{...('style' in props ? { style: style } : {})}
		>
			{content}
		</a>
	);
};

export default Link;