import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'

interface MarkdownPreviewProps {
  title?: string
  content: string
  className?: string
}

export default function MarkdownPreview({ title, content, className }: MarkdownPreviewProps) {
  return (
    <Card className={className}>
      {title && (
        <CardHeader>
          <CardTitle>{title}</CardTitle>
        </CardHeader>
      )}
      <CardContent>
        <div className="prose prose-sm max-w-none dark:prose-invert">
          <pre className="whitespace-pre-wrap break-words bg-muted p-4 rounded-md overflow-auto max-h-[600px]">
            {content}
          </pre>
        </div>
      </CardContent>
    </Card>
  )
}