import { Card, Skeleton } from './ui'
import { renderMarkdown } from '@/lib/markdownRenderer'

interface DocsContentProps {
  content: string
  loading: boolean
}

export function DocsContent({ content, loading }: DocsContentProps): React.ReactElement {
  if (loading) {
    return (
      <Card variant="default" className="bg-cyber-dark backdrop-blur-sm space-y-4">
        <Skeleton variant="rectangular" height={32} className="w-1/2" />
        <Skeleton variant="rectangular" height={16} className="w-full" />
        <Skeleton variant="rectangular" height={16} className="w-full" />
        <Skeleton variant="rectangular" height={16} className="w-3/4" />
        <Skeleton variant="rectangular" height={32} className="w-1/3" />
        <Skeleton variant="rectangular" height={16} className="w-full" />
        <Skeleton variant="rectangular" height={16} className="w-5/6" />
      </Card>
    )
  }

  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>
  )
}