---
const { copyText } = Astro.props;
---

<span class="copy-container">
  <svg
    aria-hidden="true"
    focusable="false"
    role="img"
    class="copy-button"
    viewBox="0 0 16 16"
    width="16"
    height="16"
    style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible;"
    fill="currentColor"
    ><path
      d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"
    ></path><path
      d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"
    ></path></svg
  >
  <svg
    style="display:none;user-select:none;vertical-align:text-bottom;overflow:visible;"
    aria-hidden="true"
    height="16"
    viewBox="0 0 16 16"
    version="1.1"
    width="16"
    data-view-component="true"
    class="copied-checkmark"
    ><path
      d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
    ></path></svg
  >
  <span class="tooltipText triangle">Copied!</span>
</span>

<script define:vars={{ copyText }}>
  const commandCopyBtn = document.querySelector('.copy-button');
  const copiedCheckMark = document.querySelector('.copied-checkmark');
  const tooltipText = document.querySelector('.tooltipText');

  commandCopyBtn.addEventListener('click', () => {
    navigator.clipboard.writeText(copyText);
    tooltipText.style.display = 'block';
    copiedCheckMark.style.display = 'inline-block';
    commandCopyBtn.style.display = 'none';

    setTimeout(()=>{
        copiedCheckMark.style.display = 'none';
        commandCopyBtn.style.display = 'inline-block';
        tooltipText.style.display = 'none';
  }, 2000)
  });
</script>

<style>
  .copy-button {
    margin-left: 0.5rem;
    cursor: pointer;
  }

  .copy-button:hover{
    fill: var(--sl-color-accent-high);
  }

  .copied-checkmark {
    fill: var(--sl-color-green);
    margin-left: 0.5rem;
    display: none;
  }

  .copy-container {
    position: relative;
  }

  .tooltipText {
    position: absolute;
    left: -14px;
    width: max-content;
    background-color: var(--sl-color-accent-high);
    color: white;
    display: none;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    top: 200%;
    font-size: 0.75rem;
  }

  .triangle:before {
    content: "";
    width: 0px;
    height: 0px;
    position: absolute;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid var(--sl-color-accent-high);
    right: 28px;
    top : -7px;
}
</style>