'use client';

import './payButton.scss';

import { cn } from '@/lib/utils/client';

export type PayButtonState = 'idle'|'loading'|'success';

type Props = {
	state: PayButtonState;
	label: string;
	icon?: React.ReactNode;
	onClick?: () => void;
	disabled?: boolean;
	className?: string;
	type?: 'button'|'submit';
};

export default function PayButton({
	state,
	label,
	icon,
	onClick,
	disabled,
	className,
	type = 'button'
}: Props)
{
	const isBusy = state === 'loading' || state === 'success';

	return (
		<button
			type={type}
			disabled={disabled || isBusy}
			onClick={onClick}
			className={cn(
				'pay-button',
				state === 'loading' && 'pay-button--loading',
				state === 'success' && 'pay-button--success',
				className
			)}
		>
			<span className='pay-button__label'>
				{icon}
				{label}
			</span>

			<span className='pay-button__spinner' aria-hidden>
				<svg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
					<circle cx='12' cy='12' r='9' stroke='rgba(255,255,255,0.25)' strokeWidth='3' />
					<path
						d='M21 12a9 9 0 0 0-9-9'
						stroke='#fff'
						strokeWidth='3'
						strokeLinecap='round'
					/>
				</svg>
			</span>

			<span className='pay-button__check' aria-hidden>
				<svg viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'>
					<path
						d='M6 14.5 11.5 20 22 9'
						stroke='#fff'
						strokeWidth='3'
						strokeLinecap='round'
						strokeLinejoin='round'
					/>
				</svg>
			</span>
		</button>
	);
}