import { Card } from './ui'
import { renderMarkdown } from '@/lib/markdownRenderer'
import { t } from '@/lib/i18n'

interface DocsContentProps {
  content: string
  loading: boolean
}

export function DocsContent({ content, loading }: DocsContentProps): React.ReactElement {
  if (loading) {
    return (
      <div className="text-center py-12">
        <p className="text-cyber-accent">{t('docs.loading')}</p>
      </div>
    )
  }

  return (
    <Card variant="default" className="bg-cyber-dark backdrop-blur-sm">
      <div className="prose prose-invert max-w-none prose-headings:text-neon-cyan prose-headings:font-mono prose-p:text-cyber-accent prose-a:text-neon-green prose-a:hover:text-neon-cyan prose-strong:text-neon-green prose-code:text-neon-cyan prose-code:bg-cyber-darker prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-pre:bg-cyber-darker prose-pre:border prose-pre:border-neon-cyan/20 prose-blockquote:border-neon-cyan/50 prose-blockquote:text-cyber-accent/70 prose-ul:text-cyber-accent prose-ol:text-cyber-accent prose-li:marker:text-neon-cyan">
        {renderMarkdown(content)}
      </div>
    </Card>
  )
}