interface ExportPreviewProps {
  content: Record<string, unknown> | null
}

export function ExportPreview({ content }: ExportPreviewProps): JSX.Element {
  return (
    <section className="export-preview-panel">
      <div className="panel-title-row">
        <div>
          <h2>Export Preview</h2>
          <p className="muted">JSON and GeoJSON content preview for the selected export artifact.</p>
        </div>
        <span className="count-pill">preview</span>
      </div>
      {content ? (
        <pre className="job-result">{JSON.stringify(content, null, 2)}</pre>
      ) : (
        <div className="empty-state">
          <strong>No export preview selected.</strong>
          <p>Use Preview JSON content on a JSON or GeoJSON artifact to inspect the stored payload here.</p>
        </div>
      )}
    </section>
  )
}