---
export interface Props {
  variant?: 'primary' | 'secondary' | 'ghost' | 'outline';
  size?: 'small' | 'medium' | 'large';
  href?: string;
  type?: 'button' | 'submit' | 'reset';
  class?: string;
  disabled?: boolean;
}

const { 
  variant = 'primary', 
  size = 'medium', 
  href, 
  type = 'button',
  class: className = '',
  disabled = false,
  ...rest 
} = Astro.props;

const baseStyles = "inline-flex items-center justify-center font-semibold rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 disabled:opacity-50 disabled:cursor-not-allowed";

const variants = {
  primary: "text-white bg-mana-blue hover:bg-blue-600 dark:bg-mana-blue dark:hover:bg-blue-600 focus:ring-mana-blue",
  secondary: "text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 focus:ring-gray-500",
  ghost: "text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 focus:ring-gray-500",
  outline: "text-mana-blue dark:text-mana-blue border-2 border-mana-blue dark:border-mana-blue hover:bg-blue-50 dark:hover:bg-blue-950 focus:ring-mana-blue"
};

const sizes = {
  small: "px-3 py-1.5 text-sm",
  medium: "px-5 py-2.5 text-base",
  large: "px-7 py-3.5 text-lg"
};

const classes = `${baseStyles} ${variants[variant]} ${sizes[size]} ${className}`;
---

{href ? (
  <a href={href} class={classes} {...rest}>
    <slot />
  </a>
) : (
  <button type={type} class={classes} disabled={disabled} {...rest}>
    <slot />
  </button>
)}