---
import { Icon } from "astro-icon";
---

<button
  class="copy-btn flex items-center w-4/5 mt-3 justify-center astro-md:w-1/2 astro-lg:w-[28%] astro-lg:mt-0 astro-lg:ml-3"
  id="copy-command-button"
>
  <span id="command">npm install @astro-reactive/form @astro-reactive/validator</span>
  <Icon name="mdi:content-copy" width="40px" height="40px" />
</button>

<style>
  .copy-btn {
    /* max-width: 50%; */
    color: #fff;
    background-color: #2f2f2f;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 6px 16px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
  }

  .copy-btn > span {
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
  }

  .copy-btn:hover {
    background-color: #3f3f3f;
  }
</style>

<script>
    const copyCommandButton = document.getElementById("copy-command-button");
    const commandText = document.getElementById('command').innerText;
    
    copyCommandButton.addEventListener('click', () => {
        navigator.clipboard.writeText(commandText);
    });
</script>