import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';

export const CodeBlock = ({ code }: { code: string }) => (
  <div className="position-relative">
    <SyntaxHighlighter
      language="tsx"
      style={vscDarkPlus}
      customStyle={{ margin: 0, padding: '1rem', borderRadius: '0.5rem' }}
    >
      {code}
    </SyntaxHighlighter>
    <button
      className="btn btn-sm btn-light position-absolute top-0 end-0 m-2"
      onClick={() => navigator.clipboard.writeText(code)}
    >
      <i className="bi bi-clipboard"></i>
    </button>
  </div>
);