import tailwindCss from "./tailwind.css";

export class FloatingButton extends HTMLElement {
  constructor() {
    super();
    const buttonHtml = `
			<style>
			${tailwindCss}
			</style>
			<button
                  class="fixed bottom-4 right-4 flex h-16 origin-center transform cursor-pointer items-center rounded-full py-4 px-6 text-base outline-none drop-shadow-md transition transition-all focus:outline-none focus:ring-4 focus:ring-gray-600 focus:ring-opacity-50 active:scale-95 md:bottom-6 md:right-10"
                  style="background-color: rgb(255, 202, 0); color: rgb(20, 30, 47); z-index: 10001">
                  <div class="mr-3 flex items-center justify-center">
                    <svg
                      class="h-7 w-7"
                      fill="none"
                      stroke="currentColor"
                      viewBox="0 0 24 24"
                      xmlns="http://www.w3.org/2000/svg">
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth="2"
                        d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                    </svg>
                  </div>
                  <div class="font-semibold leading-5 antialiased">Book my Cal</div>
                </button>`;
    this.attachShadow({ mode: "open" });

    this.shadowRoot!.innerHTML = buttonHtml;
  }
}