export default function Button(
	{
		left,
		center,
		right,
		children,
		variant = 'secondary',
		pressed,
		onClick,
		disabled = false,
		conditionalClass = '',
		premium,

	}
) {
	let classes = `${BUTTON_VARIANTS[variant]?.replace(/\s+/g, ' ')} ${conditionalClass} ${premium ? 'disabled' : ''}`;

	return (
		<button
			className={classes}
			onClick={onClick}
			aria-pressed={pressed}
			disabled={disabled}
		>
			{left &&
				<div className="dxp-grid dxp-place-content-center">{left}</div>
			}
			{(center || children) &&
				<div>{center || children}</div>
			}
			{right &&
				<div className="dxp-grid dxp-place-content-center">{right}</div>
			}
		</button>
	)
}

const BUTTON_VARIANTS = {
	primary: `
		active:dxp-from-red
		active:dxp-to-purple
		disabled:dxp-opacity-50
		disabled:!dxp-from-emperor
		disabled:!dxp-to-black
		disabled:hover:!dxp-from-emperor
		disabled:hover:!dxp-to-black
		dxp-bg-gradient-135
		dxp-border-none
		dxp-cursor-pointer
		dxp-flex
		dxp-from-purple
		dxp-gap-1
		dxp-items-center
		dxp-px-4
		dxp-py-2
		dxp-rounded-full
		dxp-text-sm
		dxp-text-white
		dxp-to-red
		dxp-via-pink-500
		focus:dxp-from-red/90
		focus:dxp-to-purple/90
		hover:dxp-from-red/90
		hover:dxp-to-purple/90
		focus-visible:!dxp-outline
		focus-visible:!dxp-outline-1
		focus-visible:!dxp-outline-purple
	`,
	secondary: `
		active:dxp-bg-purple-300/[.3]
		dxp-bg-transparent
		dxp-border
		dxp-border-purple-300
		dxp-border-solid
		dxp-cursor-pointer
		dxp-flex
		dxp-font-bold
		dxp-gap-4
		dxp-items-center
		dxp-px-4
		dxp-py-2
		dxp-rounded-full
		dxp-text-purple
		dxp-text-sm
		focus-within:dxp-bg-purple-300/[.08]
		focus:dxp-bg-purple-300/[.08]
		hover:dxp-bg-purple-300/[.08]
		focus-visible:!dxp-outline
		focus-visible:!dxp-outline-1
		focus-visible:!dxp-outline-purple
		`,
		check_button_left: `
			active:dxp-bg-purple-300/[.3]
			dxp-border
			dxp-border-purple-300
			dxp-border-solid
			dxp-cursor-pointer
			dxp-flex
			dxp-font-bold
			dxp-gap-4
			dxp-items-center
			dxp-px-4
			dxp-py-2
			dxp-text-purple
			dxp-text-sm
			focus-visible:!dxp-outline
			focus-visible:!dxp-outline-1
			focus-visible:!dxp-outline-purple
			dxp-rounded-tl-3xl
			dxp-rounded-tr-none
			dxp-rounded-bl-3xl
			dxp-rounded-br-none
			dxp-ml-[-1px]
			dxp-min-w-[65px]
			`,
			check_button_right: `
				active:dxp-bg-purple-300/[.3]
				dxp-border
				dxp-border-purple-300
				dxp-border-solid
				dxp-cursor-pointer
				dxp-flex
				dxp-font-bold
				dxp-gap-4
				dxp-items-center
				dxp-px-4
				dxp-py-2
				dxp-text-purple
				dxp-text-sm
				focus-visible:!dxp-outline
				focus-visible:!dxp-outline-1
				focus-visible:!dxp-outline-purple
				border-radius:0px 25px 25px 0px
				dxp-rounded-tl-none
				dxp-rounded-tr-3xl
				dxp-rounded-bl-none
				dxp-rounded-br-3xl
				dxp-ml-[-1px]
				dxp-min-w-[65px]
				`,
	'secondary-small': `
		active:dxp-bg-purple-300/[.3]
		dxp-bg-white
		dxp-border
		dxp-border-purple-300
		dxp-border-solid
		dxp-cursor-pointer
		dxp-flex
		dxp-font-bold
		dxp-gap-2
		dxp-items-center
		dxp-px-3
		dxp-py-1
		dxp-rounded-full
		dxp-text-purple
		dxp-text-sm
		focus-within:dxp-bg-purple-300/[.08]
		focus:dxp-bg-purple-300/[.08]
		hover:dxp-bg-purple-300/[.08]
		focus-visible:!dxp-outline
		focus-visible:!dxp-outline-1
		focus-visible:!dxp-outline-purple
		`,
	link: `
		active:dxp-text-black
		dxp-bg-transparent
		dxp-border-none
		dxp-cursor-pointer
		dxp-flex
		dxp-font-bold
		dxp-gap-1
		dxp-items-center
		dxp-outline-offset-2
		dxp-p-0
		dxp-text-purple
		dxp-text-sm
		focus-within:dxp-text-tundora
		focus:dxp-text-tundora
		hover:dxp-text-tundora
		focus-visible:!dxp-outline
		focus-visible:!dxp-outline-1
		focus-visible:!dxp-outline-purple
		`,
	'link-purple': `
		active:dxp-text-black
		dxp-bg-transparent
		dxp-border-none
		dxp-cursor-pointer
		dxp-flex
		dxp-font-bold
		dxp-gap-1
		dxp-items-center
		dxp-outline-offset-2
		dxp-p-0
		dxp-text-purple
		dxp-text-sm
		focus-within:dxp-text-tundora
		focus:dxp-text-tundora
		hover:dxp-text-tundora
		`,
	'link-red': `
		active:dxp-text-black
		dxp-bg-transparent
		dxp-border-none
		dxp-cursor-pointer
		dxp-flex
		dxp-font-normal
		dxp-gap-4
		dxp-items-center
		dxp-outline-offset-2
		dxp-p-0
		dxp-text-red
		dxp-text-sm
		focus-within:dxp-text-tundora
		focus:dxp-text-tundora
		hover:dxp-text-tundora
		`,
}