<script lang="ts">
	import type { Snippet } from "svelte";

	interface Props {
		children: Snippet;
		variant?: "primary" | "google" | "apple" | "secondary" | "danger";
		onclick?: () => void;
		class?: string;
		type?: "button" | "submit" | "reset";
		disabled?: boolean;
	}

	let {
		children,
		variant = "primary",
		onclick,
		class: className = "",
		type = "button",
		disabled = false,
	}: Props = $props();

	const variantClasses = {
		primary:
			"bg-blue-500 hover:bg-blue-600 text-white border-gray-500 shadow-md hover:shadow-lg",
		google: "bg-white hover:bg-gray-50 text-gray-700 border-gray-500 shadow-md hover:shadow-lg",
		apple: "bg-black hover:bg-gray-900 text-white border-gray-500 shadow-md hover:shadow-lg",
		secondary:
			"bg-white/50 hover:bg-white/70 text-gray-700 border-gray-500 shadow-sm hover:shadow-md backdrop-blur-sm",
		danger: "bg-red-500 hover:bg-red-600 text-white border-gray-500 shadow-md hover:shadow-lg",
	};
</script>

<button
	{type}
	{onclick}
	{disabled}
	class="inline-flex items-center justify-center px-4 py-2 rounded-lg border-2 font-bold text-sm transition-all duration-200 {variantClasses[
		variant
	]} {className}"
>
	{@render children()}
</button>
