"use client";

import React from "react";
import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";

import markdownStyles from "./GlobalChatboxMarkdown.module.css";

export const normalizeClipboardText = (value: string) => value.replace(/\s+$/u, "");

export const MarkdownBlock = ({ children }: { children: string }) => {
  const handleCopy = React.useCallback((event: React.ClipboardEvent<HTMLDivElement>) => {
    const selectedText = window.getSelection()?.toString();
    if (!selectedText) return;

    event.preventDefault();
    event.clipboardData.setData("text/plain", normalizeClipboardText(selectedText));
  }, []);

  return (
    <div className={markdownStyles.markdown} onCopy={handleCopy}>
      <ReactMarkdown remarkPlugins={[remarkGfm]}>{children}</ReactMarkdown>
    </div>
  );
};