---
interface Props {
  variant?: "primary" | "secondary" | "tertiary";
  size?: "sm" | "md" | "lg";
  href?: string;
  type?: "button" | "submit" | "reset";
  class?: string;
  "aria-label"?: string;
  [key: string]: unknown;
}

const {
  variant = "primary",
  size = "md",
  href,
  type = "button",
  class: className = "",
  "aria-label": ariaLabel,
  ...rest
} = Astro.props;

const baseStyles =
  "inline-flex items-center justify-center font-bold transition-all focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none rounded-xl";

const variants = {
  primary:
    "bg-foreground text-background hover:bg-foreground/90 transform hover:scale-105 shadow-lg shadow-primary/20",
  secondary: "bg-muted text-foreground border border-border hover:bg-muted/80",
  tertiary:
    "bg-transparent text-foreground hover:bg-accent hover:text-accent-foreground",
};

const sizes = {
  sm: "px-4 py-2 text-sm",
  md: "px-6 py-3 text-base",
  lg: "px-8 py-4 text-lg",
};

const classes = [baseStyles, variants[variant], sizes[size], className].join(
  " ",
);

const Tag = href ? "a" : "button";
---

<Tag
  type={href ? undefined : type}
  href={href}
  class={classes}
  aria-label={ariaLabel}
  {...rest}
>
  <slot />
</Tag>
