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

interface CodeBlockProps {
  code: string;
  language: string;
}

const CodeBlock = ({ code, language }: CodeBlockProps) => {
  // Map common language aliases
  const normalizeLanguage = (lang: string): string => {
    const langMap: Record<string, string> = {
      'js': 'javascript',
      'ts': 'typescript',
      'py': 'python',
      'rb': 'ruby',
      'sh': 'bash',
      'shell': 'bash',
      'yml': 'yaml',
      'md': 'markdown',
    };
    return langMap[lang.toLowerCase()] || lang.toLowerCase();
  };

  const normalizedLang = normalizeLanguage(language);

  return (
    <div className="relative my-2 rounded-md overflow-hidden border border-primary/30">
      <div className="flex items-center justify-between px-3 py-1 bg-primary/10 border-b border-primary/30">
        <span className="text-xs text-primary/70 font-pixel">{language || 'code'}</span>
      </div>
      <SyntaxHighlighter
        language={normalizedLang}
        style={gruvboxDark}
        customStyle={{
          margin: 0,
          padding: '1rem',
          background: 'rgba(29, 32, 33, 0.9)',
          fontSize: '0.75rem',
          borderRadius: 0,
        }}
        wrapLongLines
        showLineNumbers={code.split('\n').length > 5}
      >
        {code}
      </SyntaxHighlighter>
    </div>
  );
};

export default CodeBlock;