"use client";

import { useCartStore } from "@/lib/cart-store";
import { trackEvent } from "@/components/Tracking";

export default function AddToCartButton({
  productId,
  productName,
  className,
}: {
  productId: number;
  productName: string;
  /** Optional extra CSS class — e.g. "btn-teal". Uses a minimal pill style by default. */
  className?: string;
}) {
  const addItem = useCartStore((s) => s.addItem);
  const loading = useCartStore((s) => s.loading);

  const handleClick = () => {
    trackEvent("add_to_cart", {
      product_id: productId,
      product_name: productName,
    });
    addItem(productId);
  };

  return (
    <button
      type="button"
      className={className || "btn-teal"}
      onClick={handleClick}
      disabled={loading}
      style={{
        padding: "12px 24px",
        fontSize: 14,
        fontWeight: 700,
        borderRadius: 999,
        border: 0,
        cursor: loading ? "default" : "pointer",
        opacity: loading ? 0.6 : 1,
        display: "inline-flex",
        alignItems: "center",
        gap: 6,
      }}
    >
      {loading ? (
        "Adding…"
      ) : (
        <>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <circle cx="9" cy="21" r="1" />
            <circle cx="20" cy="21" r="1" />
            <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6" />
          </svg>
          Add to Cart
        </>
      )}
    </button>
  );
}