'use client'

import { ExternalLink } from 'lucide-react'

interface PdfPreviewProps {
  src: string
  fileName?: string
  onOpenExternal?: () => void
}

/**
 * PDF preview using iframe with the workspace raw API.
 * Electron has built-in PDF support in iframes.
 */
export function PdfPreview({ src, fileName, onOpenExternal }: PdfPreviewProps) {
  return (
    <div className="flex flex-col h-full bg-white">
      <div className="flex items-center justify-between px-3 py-1.5 border-b border-subtle bg-surface shrink-0">
        <span className="text-[11px] text-muted">PDF</span>
        <div className="flex items-center gap-2">
          {fileName && (
            <span className="text-[11px] text-tertiary truncate max-w-[200px]">{fileName}</span>
          )}
          {onOpenExternal && (
            <button
              onClick={onOpenExternal}
              className="flex items-center gap-1 px-2 py-0.5 rounded text-[11px] text-brand hover:bg-surface-hover transition-colors"
              title="Open with default application"
            >
              <ExternalLink size={10} />
              <span>Open</span>
            </button>
          )}
        </div>
      </div>
      <iframe
        src={src}
        className="flex-1 w-full border-0 bg-white"
        title={fileName || 'PDF Preview'}
      />
    </div>
  )
}