---
import type { HTMLAttributes } from 'astro/types';

interface Props extends HTMLAttributes<'a'>, HTMLAttributes<'button'> {
    variant?: 'primary' | 'secondary' | 'danger' | 'success' | 'warning' | 'whatsapp' | 'link' | 'ghost' | 'blue';
    size?: 'sm' | 'md' | 'lg';
    fullWidth?: boolean;
    isLoading?: boolean;
    href?: string;
    type?: 'button' | 'submit' | 'reset';
    disabled?: boolean;
    class?: string;
    className?: string; // Добавлено для совместимости
}

const {
    variant = 'primary',
    size = 'md',
    fullWidth = false,
    disabled = false,
    isLoading = false,
    href,
    type = 'button',
    class: listClass,   // Стандартный class Astro
    className,          // React-style className (из формы)
    ...attrs            // Остальные атрибуты (id, onclick и т.д.)
} = Astro.props;

const variantClasses = {
    primary: 'bg-amber-500 hover:bg-amber-600 text-white focus:ring-amber-500',
    secondary: 'bg-gray-600 hover:bg-gray-700 text-white focus:ring-gray-500',
    danger: 'bg-red-600 hover:bg-red-700 text-white focus:ring-red-500',
    success: 'bg-green-600 hover:bg-green-700 text-white focus:ring-green-500',
    warning: 'bg-yellow-600 hover:bg-yellow-700 text-white focus:ring-yellow-500',
    whatsapp: 'bg-green-500 hover:bg-green-600 text-white focus:ring-green-400',
    link: 'text-blue-600 hover:text-blue-800 underline focus:ring-blue-500 bg-transparent shadow-none',
    ghost: 'bg-transparent text-gray-700 hover:bg-gray-100 focus:ring-gray-500',
    blue: 'bg-blue-600 hover:bg-blue-700 text-white focus:ring-blue-500'
};

const sizeClasses = {
    sm: 'px-3 py-2 text-sm rounded-md',
    // Изменено px-5 на px-4, чтобы совпадать с Google кнопкой в форме
    md: 'px-4 py-3 text-base rounded-lg',
    lg: 'px-6 py-3.5 text-lg rounded-lg'
};

const isInactive = disabled || isLoading;

const baseClasses = [
    'relative inline-flex items-center justify-center gap-2',
    'font-semibold shadow-md transition-all duration-200',
    'focus:outline-none focus:ring-2 focus:ring-offset-2',
    sizeClasses[size],
    variantClasses[variant],
    fullWidth ? 'w-full' : '',
    // ВАЖНО: opacity-50 совпадает с тем, что удаляет ваш скрипт в форме
    isInactive ? 'opacity-50 cursor-not-allowed' : 'hover:shadow-lg cursor-pointer',
    listClass,
    className // Добавляем className в итоговую строку
].filter(Boolean).join(' ');
---

{href && !isInactive ? (
<a href={href} class={baseClasses} {...attrs}>
    <slot />
</a>
    ) : (
<button type={href ? 'button' : type} class={baseClasses} disabled={isInactive} {...attrs}>
        <span class:list={['flex items-center justify-center gap-2', { 'opacity-0': isLoading }]}>
          <slot />
        </span>
    {isLoading && (
            <span class="absolute inset-0 flex items-center justify-center">
                <div class="loader"></div>
            </span>
    )}
</button>
    )}

<style>
    .loader {
        width: 1.25em;
        height: 1.25em;
        border: 2px solid currentColor;
        border-bottom-color: transparent;
        border-radius: 50%;
        display: inline-block;
        box-sizing: border-box;
        animation: rotation 1s linear infinite;
    }

    @keyframes rotation {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
</style>