<script lang="ts">
    import type { MouseEventHandler } from "svelte/elements"
    import type { Snippet } from "svelte"

    type Props = {
        text?: string
        variant?: "primary" | "secondary" | "outline" | "text" | "danger" | "ghost"
        size?: "sm" | "md" | "lg"
        type?: "button" | "submit"
        disabled?: boolean
        onclick?: MouseEventHandler<HTMLButtonElement>
        class?: string
        children?: Snippet
    }

    let {
        text = "Button",
        variant = "primary",
        size = "md",
        type = "button",
        disabled = false,
        onclick = undefined,
        class: className = "",
        children,
    }: Props = $props()

    // Base classes
    const baseClasses =
        "font-sans font-bold rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 flex items-center justify-center"

    // Variant classes
    const variantClasses = {
        primary: "bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-600 disabled:bg-gray-300",
        secondary:
            "bg-gray-200 text-gray-900 hover:bg-gray-300 focus:ring-gray-500 disabled:bg-gray-100 disabled:text-gray-400",
        outline:
            "bg-transparent border-2 border-blue-600 text-blue-600 hover:bg-blue-50 focus:ring-blue-600 disabled:border-gray-300 disabled:text-gray-400",
        text: "bg-transparent text-blue-600 hover:bg-blue-50 hover:text-blue-700 focus:ring-blue-600 disabled:text-gray-400",
        danger: "bg-transparent border-2 border-red-200 text-red-600 hover:bg-red-50 hover:border-red-300 focus:ring-red-500 disabled:border-gray-300 disabled:text-gray-400",
        ghost: "bg-transparent text-gray-900 hover:text-blue-600 focus:ring-blue-600 disabled:text-gray-400 p-0",
    }

    // Size classes
    const sizeClasses = {
        sm: "px-4 py-2 text-base",
        md: "px-6 py-2.5 text-lg leading-relaxed",
        lg: "px-8 py-4 text-xl",
    }

    let classes = $derived(`${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${className}`)
</script>

<button {type} class={classes} {onclick} {disabled}>
    {#if children}
        {@render children()}
    {:else}
        {text}
    {/if}
</button>
