import React from 'react';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import { resolveUpdateAssetUrl } from '../../data/updateNotes';
import * as css from './UpdatesDialog.css';

type UpdateMarkdownViewerProps = {
  markdown: string;
};

export function UpdateMarkdownViewer({ markdown }: UpdateMarkdownViewerProps) {
  if (!markdown.trim()) {
    return null;
  }

  return (
    <div className={css.Markdown}>
      <ReactMarkdown
        remarkPlugins={[remarkGfm]}
        components={{
          a: ({ href, children }) => (
            <a href={href} target="_blank" rel="noreferrer noopener">
              {children}
            </a>
          ),
          img: ({ src, alt }) => (
            <img src={resolveUpdateAssetUrl(src) ?? src} alt={alt ?? ''} loading="lazy" />
          ),
        }}
      >
        {markdown}
      </ReactMarkdown>
    </div>
  );
}