---
export interface Props {
  // Основные пропсы компонента
  href?: string;
  type?: 'button' | 'submit' | 'reset';
  variant?: 'primary' | 'secondary' | 'outline' | 'gold';
  size?: 'sm' | 'md' | 'lg';
  disabled?: boolean;
  class?: string;

  // Стандартные HTML-атрибуты
  id?: string;
  name?: string;
  value?: string | number | string[];
  onclick?: string | ((event: MouseEvent) => void);

  // Data-атрибуты
  [key: `data-${string}`]: string | undefined;

  // ARIA и другие атрибуты
  role?: string;
  'aria-label'?: string;
  'aria-describedby'?: string;
  'aria-expanded'?: string;
  'aria-controls'?: string;
  'aria-pressed'?: string;
  tabindex?: number | string;
  title?: string;
}

const {
  href,
  type = 'button',
  variant = 'primary',
  size = 'md',
  disabled = false,
  class: className = '',
  id,
  name,
  value,
  onclick,
  role,
  tabindex,
  title,
  'data-modal-target': modalTarget,
  ...dataAttrs // Все data-* атрибуты
}: Props = Astro.props;

const baseClasses = 'btn inline-flex items-center justify-center font-semibold transition-all duration-300 rounded-md cursor-pointer';

const variantClasses = {
  primary: 'bg-primary text-white hover:bg-primary-dark',
  secondary: 'bg-secondary text-white hover:bg-secondary-dark',
  outline: 'border-2 border-primary text-primary hover:bg-primary hover:text-white',
  gold: 'bg-gradient-to-b from-[#eac26e] to-[#ce9f40] text-white hover:opacity-90',
};

const sizeClasses = {
  sm: 'px-3 py-1.5 text-sm',
  md: 'px-4 py-2 text-base',
  lg: 'px-6 py-3 text-lg',
};

const classes = `${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${disabled ? 'opacity-50 cursor-not-allowed' : ''} ${className}`;

// Фильтруем undefined значения для чистого HTML
const commonAttrs = Object.fromEntries(
    Object.entries({
      id,
      name,
      value,
      onclick,
      role,
      tabindex,
      title,
      ...dataAttrs
    }).filter(([, v]) => v !== undefined)
);
---

{href ? (
<a
    href={href}
    class={classes}
    {...commonAttrs}
>
  <slot />
</a>
    ) : (
<button
    type={type}
    class={classes}
    disabled={disabled}
    {...commonAttrs}
    {...(modalTarget ? { 'data-modal-target': modalTarget } : {})}
>
  <slot />
</button>
)}

{modalTarget && (
<script define:vars={{ modalTarget }}>
  document.querySelectorAll(`[data-modal-target="${modalTarget}"]`).forEach(btn => {
    btn.addEventListener('click', () => {
      const modal = document.getElementById(modalTarget);
      if (modal) {
        modal.classList.add('active');
        modal.setAttribute('aria-hidden', 'false');
        document.body.style.overflow = 'hidden';
      }
    });
  });
</script>
)}

<style>
  .btn {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
  }

  .btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    transition: left 0.5s ease;
  }

  .btn:hover::before {
    left: 100%;
  }

  .btn:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
  }

  .btn:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  }

  .btn:disabled {
    pointer-events: none;
  }
</style>