import { createVariant } from '@rapid-web/ui';
import { Button } from '@rapid-web/ui';

export const button = createVariant({
	baseStyle: 'py-2 px-3',
	variants: {
		default:
			'text-white bg-[#6925C0] hover:bg-hoverSecondary rounded-xl transition-all ease-out',
		gradient:
			'text-black gradient-button rounded-xl transition-all ease-out duration-300',
		danger: 'text-white bg-dangerRed rounded-xl transition-all ease-out',
	},
	sizes: {
		default: 'w-40 h-10',
		sm: 'w-36',
		lg: 'w-56',
	},
	defaultProps: {
		variant: 'default',
		size: 'default',
	},
});

const Page = () => {
	return (
		<div>
			<h1>Hello Rapid-UI</h1>
			<Button variant='danger'>Click me!</Button>
		</div>
	)
}