function copyCode(text, button) {
  navigator.clipboard.writeText(text).then(() => {
    const originalText = button.textContent;
    button.textContent = 'Copied!';
    setTimeout(() => {
      button.textContent = originalText;
    }, 1000);
  }).catch((error) => {
    alert(`Copy failed: ${error}`);
  });
}


 function transformCodeBlocks() {
  let blocks = document.querySelectorAll('pre');
  blocks.forEach((block) => {
    let code = block.querySelector('code');
    let text = code.innerText;

    let parentDiv = document.createElement('div');
    parentDiv.style.backgroundColor = '#343541';
    parentDiv.style.overflowX = 'auto';
    parentDiv.style.display = 'flex';
    parentDiv.style.flexDirection = 'column';
    parentDiv.style.borderRadius = '8px'

    let codeDiv = document.createElement('div');
    codeDiv.style.display = 'flex';
    codeDiv.style.justifyContent = 'space-between';
    codeDiv.style.alignItems = 'center';

    let langDiv = document.createElement('div');
    langDiv.textContent = code.className;
    langDiv.style.color = 'white';
    langDiv.style.margin = '8px';

    let button = document.createElement('button');
    button.textContent = 'Copy Code';
    button.style.background = 'none';
    button.style.border = 'none';
    button.style.margin = '8px';
    button.style.cursor = 'pointer';
    button.style.color = '#ddd';
    button.addEventListener('click', () => copyCode(text, button));

    codeDiv.appendChild(langDiv);
    codeDiv.appendChild(button);

    let pre = document.createElement('pre');
    pre.textContent = text;
    pre.style.margin = '0px';
    pre.style.padding = '8px'
    pre.style.backgroundColor = 'black';
    pre.style.color = 'white';

    parentDiv.appendChild(codeDiv);
    parentDiv.appendChild(pre);

    block.parentNode.replaceChild(parentDiv, block);
  });
}

transformCodeBlocks();