// import React from 'react';

// const CodeEditor = () => {
//   const copyCode = () => {
//     const codeElement = document.getElementById('code-snippet');
//     navigator.clipboard.writeText(codeElement.innerText)
//       .then(() => {
//         alert('Code copied to clipboard!');
//       })
//       .catch(err => {
//         console.error('Failed to copy: ', err);
//       });
//   };

//   return (
//     <div className="code-editor">
//       <pre>
//         <code id="code-snippet">
//           {`class Painter:
//     def color_shape(self, shape):
//         # Code for coloring the shape
//         pass`}
//         </code>
//       </pre>
//       <button className="copy-btn" onClick={copyCode}>
//         Copy Code
//       </button>
//     </div>
//   );
// };

// export default CodeEditor;

// src/components/CodeBlock.js
import React from 'react';

const CodeBlock = ({ code }) => {
  const copyCode = () => {
    navigator.clipboard.writeText(code)
      .then(() => {
        alert('Code copied to clipboard!');
      })
      .catch(err => {
        console.error('Failed to copy: ', err);
      });
  };

  return (
    <div className="code-editor">
      <pre>
        <code>{code}</code>
      </pre>
      <button className="copy-btn" onClick={copyCode}>
        Copy Code
      </button>
    </div>
  );
};

export default CodeBlock;