interface ButtonProps {
  label: string;
  variant?: "filled" | "outlined" | "ghost";
  size?: "sm" | "md" | "lg";
  icon?: string;
  fullWidth?: boolean;
  danger?: boolean;
  onClick?: () => void;
}

const SIZE_CLASSES = {
  sm: "px-2.5 py-1 text-[var(--z-font-sm)]",
  md: "px-4 py-2 text-[var(--z-font-md)]",
  lg: "px-5 py-2.5 text-sm",
};

export function Button({ label, variant = "filled", size = "md", icon, fullWidth, danger, onClick }: ButtonProps) {
  const sizeClass = SIZE_CLASSES[size];
  const base = `${sizeClass} rounded-[var(--z-radius-button)] font-medium transition-all inline-flex items-center justify-center gap-1.5 ${fullWidth ? "w-full" : ""}`;

  const styles: Record<string, Record<string, string>> = {
    filled: { background: danger ? "#ef4444" : "var(--z-accent)", color: "white", border: "none" },
    outlined: { background: "transparent", color: danger ? "#ef4444" : "var(--z-text)", border: `1px solid ${danger ? "rgba(239,68,68,0.3)" : "var(--z-border)"}` },
    ghost: { background: "transparent", color: danger ? "#ef4444" : "var(--z-muted)", border: "none" },
  };

  return (
    <button class={base} style={styles[variant] || styles.filled} onClick={onClick}>
      {icon && <span>{icon}</span>}
      {label}
    </button>
  );
}
