---
interface Props {
  variant?: 'primary' | 'secondary' | 'neutral';
  size?: 'xs' | 'sm' | 'md' | 'lg';
  href?: string;
  class?: string;
  onclick?: string;
}

const { 
  variant = 'neutral', 
  size = 'md',
  href,
  onclick,
  class: className = ''
} = Astro.props;

const baseStyles = 'inline-flex items-center gap-1.5 rounded-lg font-mono transition-all duration-300';

const variantStyles = {
  primary: 'border border-[var(--primary)] bg-[var(--primary-light)] text-[var(--primary)] hover:bg-[var(--primary)] hover:text-[var(--terminal-bg)]',
  secondary: 'border border-[var(--secondary)] bg-[var(--secondary-light)] text-[var(--secondary)] hover:bg-[var(--secondary)] hover:text-[var(--terminal-bg)]',
  neutral: 'border border-[var(--border-color)] bg-[var(--header-bg)] text-[var(--text)] hover:border-[var(--primary)] hover:text-[var(--primary)]'
};

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

const classes = `${baseStyles} ${variantStyles[variant]} ${sizeStyles[size]} ${className}`;
---

{href ? (
  <a href={href} class={classes} onclick={onclick}>
    <slot />
  </a>
) : (
  <button class={classes} onclick={onclick}>
    <slot />
  </button>
)}
