/**
 * Add to Cart Button Component
 * Button with plus icon and shopping bag icon
 */
import { plusIcon } from "../icons/plus.js";
import { shoppingBagIcon } from "../icons/shopping-bag.js";

class AddToCartButton extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
  }

  connectedCallback() {
    this.render();
    this.setupEventListeners();
  }

  setupEventListeners() {
    const button = this.shadowRoot.querySelector(".add-to-cart-button");
    if (button) {
      button.addEventListener("click", () => {
        this.dispatchEvent(
          new CustomEvent("add-to-cart", {
            bubbles: true,
            composed: true,
          })
        );
      });
    }
  }

  render() {
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: inline-block;
        }

        .add-to-cart-button {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: var(--spacing-xs, 0.25rem);
          width: 70px;
          height: 40px;
          padding: 0;
          background-color: var(--color-button-primary, #951d51);
          border: none;
          border-radius: var(--radius-sm, 0.25rem);
          cursor: pointer;
          transition: opacity var(--transition-fast, 150ms ease);
        }

        .add-to-cart-button:hover {
          opacity: 0.9;
        }

        .add-to-cart-button:active {
          opacity: 0.8;
        }

        .add-to-cart-button svg {
          width: 24px;
          height: 24px;
          color: var(--color-text-inverse, #ffffff);
        }
      </style>
      <button class="add-to-cart-button" type="button">
        ${plusIcon({ size: 16, color: "#ffffff" })}
        ${shoppingBagIcon({ size: 16, color: "#ffffff" })}
      </button>
    `;
  }
}

customElements.define("add-to-cart-button", AddToCartButton);