import { useMemo } from 'react'
import { cn } from '@/lib/utils'
import { highlightCode } from '@/lib/highlight'

// Highlighted source: the reply code blocks and the artifact panel's Code tab.
// highlightCode returns escaped HTML with hljs-* spans, so injecting it is
// safe; the token colours live in index.css under `.code-highlight`.

export interface CodeBlockProps {
  code: string
  language?: string | null
  className?: string
}

export function CodeBlock({ code, language, className }: CodeBlockProps) {
  const { html, language: applied } = useMemo(() => highlightCode(code, language), [code, language])
  return (
    <code
      className={cn('code-highlight block font-mono text-[12.5px] leading-relaxed whitespace-pre', className)}
      data-language={applied ?? undefined}
      dangerouslySetInnerHTML={{ __html: html }}
    />
  )
}