import { clsx } from '@admin/utils';

const VARIANTS = {
	primary: 'border-0 bg-primary hover:bg-primary-hover',
	green: 'border-0 bg-green-600 hover:bg-green-700',
	invert: 'border-0 bg-primary hover:bg-white hover:text-secondary-black',
	outline: 'border border-white/40 hover:bg-white/12',
};

const SIZES = {
	md: 'px-4 py-2 text-sm font-medium',
	lg: 'px-6 py-3 text-base font-medium',
	xl: 'px-8 py-3 text-lg font-normal',
};

export function PrimaryButton( {
	children,
	onClick,
	disabled,
	href,
	target,
	size = 'md',
	variant = 'primary',
} ) {
	const className = clsx(
		'inline-flex cursor-pointer items-center gap-2 rounded text-white no-underline hover:text-white disabled:cursor-not-allowed disabled:opacity-40',
		VARIANTS[ variant ],
		SIZES[ size ]
	);

	if ( href ) {
		return (
			<a
				href={ href }
				target={ target }
				rel="noreferrer"
				onClick={ onClick }
				className={ className }
			>
				{ children }
			</a>
		);
	}

	return (
		<button
			type="button"
			onClick={ onClick }
			disabled={ disabled }
			className={ className }
		>
			{ children }
		</button>
	);
}