import classNames from 'classnames';
import {
	bannerButtonVariables,
	buttonHoverClasses,
	colorsOf,
	designButtonVariables,
} from './colors';
import { externalLinkProps } from './notification-link';

const VARIABLES = {
	banner: bannerButtonVariables,
	design: designButtonVariables,
};

export const Cta = ({
	notification,
	href,
	external,
	onClick,
	surface,
	className,
}) => {
	const ctaLabel = notification['cta-label'];
	if (!ctaLabel || !href) {
		return null;
	}

	const colors = colorsOf(notification);

	return (
		<a
			href={href}
			{...externalLinkProps(external)}
			onClick={onClick}
			className={classNames(className, buttonHoverClasses(colors))}
			style={VARIABLES[surface](colors)}
		>
			{ctaLabel}
		</a>
	);
};