'use client'

import { Code, Globe, Terminal } from 'lucide-react'
import type { BlockPreviewProps } from './index.js'

export function CodePreview({ data, variant = 'embed' }: BlockPreviewProps) {
  const content = (data.content as string) || ''
  const language = (data.language as string) || ''
  const sandboxed = data.sandboxed as boolean | undefined

  const truncated = content.length > 200 ? content.slice(0, 200) + '…' : content

  const icon =
    variant === 'html' ? (
      <Globe size={14} className="text-muted-foreground" />
    ) : variant === 'script' ? (
      <Terminal size={14} className="text-muted-foreground" />
    ) : (
      <Code size={14} className="text-muted-foreground" />
    )

  return (
    <div className="border-border overflow-hidden rounded-md border">
      <div className="border-border bg-card flex items-center gap-2 border-b px-3 py-2">
        {icon}
        <span className="text-muted-foreground text-xs">{language || variant}</span>
        {sandboxed && (
          <span className="bg-muted text-muted-foreground ml-auto rounded px-1.5 py-0.5 text-xs">
            sandboxed
          </span>
        )}
      </div>
      <div className="bg-card p-4">
        {truncated ? (
          <pre className="text-foreground overflow-hidden font-mono text-xs whitespace-pre-wrap">
            {truncated}
          </pre>
        ) : (
          <p className="text-muted-foreground font-mono text-xs italic">
            // Code content goes here…
          </p>
        )}
      </div>
    </div>
  )
}
