"use client"

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

interface SyntaxHighlighterProps {
  code: string
  language?: string
}

const CodeHighlighter = ({ code, language = "javascript" }: SyntaxHighlighterProps) => {
  return (
    <div className="rounded-lg overflow-hidden border border-slate-700">
      <SyntaxHighlighter
        language={language}
        style={vscDarkPlus}
        customStyle={{
          background: '#0f172a',
          borderRadius: '0.5rem',
          fontSize: '0.875rem',
          lineHeight: '1.6',
          border: 'none',
          margin: 0,
          padding: '1rem',
        }}
        codeTagProps={{
          style: {
            fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace',
          }
        }}
        showLineNumbers={false}
        wrapLines={true}
        wrapLongLines={true}
        PreTag={({ children, ...props }) => (
          <pre className="!m-0 p-2" {...props}>
            {children}
          </pre>
        )}
      >
        {code}
      </SyntaxHighlighter>
    </div>
  )
}

export default CodeHighlighter