"use client";

import type { ButtonHTMLAttributes } from "react";
import { trackEvent } from "@/hooks/useAnalytics";

export function Button({ children, style, onClick, ...props }: ButtonHTMLAttributes<HTMLButtonElement>) {
  function handleClick(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
    trackEvent("ui_button_click", {
      label: typeof children === "string" ? children : props.name ?? "button"
    });
    onClick?.(event);
  }

  return (
    <button
      {...props}
      onClick={handleClick}
      style={{
        padding: "10px 18px",
        borderRadius: "999px",
        border: "1px solid rgba(0,0,0,0.2)",
        background: "black",
        color: "white",
        fontWeight: 600,
        display: "inline-flex",
        alignItems: "center",
        gap: 8,
        cursor: "pointer",
        ...style
      }}
    >
      {children}
    </button>
  );
}
