import React from 'react';
import { cva } from 'class-variance-authority';
import { cn } from '../../lib/utils.js';

const buttonVariants = cva(
	'arrayfunnel-button inline-flex items-center justify-center transition-colors arrayfunnel-focus-ring disabled:cursor-not-allowed',
	{
		variants: {
			variant: {
				primary: 'arrayfunnel-button--primary',
				secondary: 'arrayfunnel-button--secondary',
				ghost: 'arrayfunnel-button--ghost',
				danger: 'arrayfunnel-button--danger',
			},
			size: {
				sm: 'arrayfunnel-button--small',
				md: 'arrayfunnel-button--medium',
				lg: 'arrayfunnel-button--large',
			},
		},
		defaultVariants: {
			variant: 'primary',
			size: 'md',
		},
	}
);

export function UIButton( {
	className,
	variant,
	size,
	type = 'button',
	...props
} ) {
	return (
		<button
			type={ type }
			className={ cn( buttonVariants( { variant, size } ), className ) }
			{ ...props }
		/>
	);
}

export { buttonVariants };