import { clsx } from 'clsx';

interface ButtonInputProps
	extends React.ButtonHTMLAttributes< HTMLButtonElement > {
	children: React.ReactNode;
	onClick?: React.MouseEventHandler< HTMLButtonElement >;
	link?: string;
	btnVariant?: 'primary' | 'secondary' | 'tertiary' | 'danger';
	disabled?: boolean;
	size?: 'sm' | 'md' | 'lg';
	className?: string;
}

/**
 * A versatile button component that can render as either a <button> or a <Link> element.
 *
 * Use the `btnVariant` prop to adjust the visual style:
 * - "primary" for a green-themed button.
 * - "secondary" for a blue-themed button.
 * - "tertiary" for a neutral, gray-themed button.
 * - "danger" for a red-themed button.
 *
 * The `size` prop controls button dimensions:
 * - "sm" for smaller padding and text.
 * - "md" for default spacing.
 * - "lg" for increased padding and larger, bolder text.
 *
 * @param {ButtonInputProps} props - Props for configuring the button.
 * @return {JSX.Element} The rendered button or link component.
 */
const ButtonInput: React.FC< ButtonInputProps > = ( {
	children,
	onClick,
	link,
	btnVariant = 'secondary',
	disabled = false,
	size = 'md',
	className = '',
	...props
} ) => {
	const classes = clsx(
		// Base styles for all button variants
		'rounded text-center transition-all duration-200',
		// Variant-specific styles
		{
			'bg-primary text-white hover:bg-primary hover:[box-shadow:0_0_0_3px_rgba(43,129,51,0.5)]':
				btnVariant === 'primary',
			'bg-blue text-white border border-accent-dark hover:bg-blue-700 hover:[box-shadow:0_0_0_3px_rgba(34,113,177,0.5)]':
				btnVariant === 'secondary',
			'border border-gray-400 bg-gray-100 text-text-gray hover:bg-gray-200 hover:text-text-gray hover:[box-shadow:0_0_0_3px_rgba(0,0,0,0.1)]':
				btnVariant === 'tertiary',
			'bg-red text-white hover:bg-red hover:[box-shadow:0_0_0_3px_rgba(198,39,59,0.5)]':
				btnVariant === 'danger',
		},
		// Size-specific styles
		{
			'py-0.5 px-3 text-sm font-normal': size === 'sm', // Small: Reduced padding and smaller text
			'py-1.5 px-4 text-base font-medium': size === 'md', // Medium (default): Standard padding and text size
			'py-3 px-8 text-lg font-semibold': size === 'lg', // Large: Increased padding and larger, bolder text
		},
		// Disabled styles
		{
			'opacity-50 cursor-not-allowed': disabled,
		},
		className
	);

	if ( link ) {
		return (
			<a
				href={ link }
				target={ '_blank' }
				className={ classes }
				rel="noreferrer"
			>
				{ children }
			</a>
		);
	}

	return (
		<button
			type={ props.type || 'button' }
			onClick={ onClick }
			className={ classes }
			disabled={ disabled }
			{ ...props }
		>
			{ children }
		</button>
	);
};

ButtonInput.displayName = 'ButtonInput';

export default ButtonInput;
