"use client";

import ReactMarkdown, { type Components } from "react-markdown";
import remarkGfm from "remark-gfm";

import styles from "./MarkdownText.module.scss";

interface MarkdownTextProps {
  content: string;
  className?: string;
}

export default function MarkdownText({
  content,
  className,
}: MarkdownTextProps) {
  const components: Components = {
    h1: ({ ...props }) => <h1 className={styles.h1} {...props} />,
    h2: ({ ...props }) => <h2 className={styles.h2} {...props} />,
    h3: ({ ...props }) => <h3 className={styles.h3} {...props} />,
    h4: ({ ...props }) => <h4 className={styles.h4} {...props} />,
    h5: ({ ...props }) => <h5 className={styles.h5} {...props} />,
    h6: ({ ...props }) => <h6 className={styles.h6} {...props} />,
    p: ({ ...props }) => <p className={styles.paragraph} {...props} />,
    li: ({ ...props }) => <li className={styles.listItem} {...props} />,
    strong: ({ ...props }) => <strong className={styles.bold} {...props} />,
    em: ({ ...props }) => <em className={styles.italic} {...props} />,
    pre: ({ ...props }) => <pre className={styles.codeBlock} {...props} />,
    // @ts-expect-error - inline prop is provided by react-markdown
    code: ({ inline, ...props }) =>
      inline ? (
        <code className={styles.inlineCode} {...props} />
      ) : (
        <code className={styles.code} {...props} />
      ),
    blockquote: ({ ...props }) => <blockquote className={styles.blockquote} {...props} />,
    hr: ({ ...props }) => <hr className={styles.hr} {...props} />,
    a: ({ ...props }) => (
      <a className={styles.link} target="_blank" rel="noopener noreferrer" {...props} />
    ),
  };

  return (
    <div className={`${styles.markdown} ${className || ""}`}>
      <ReactMarkdown remarkPlugins={[remarkGfm]} components={components}>
        {content}
      </ReactMarkdown>
    </div>
  );
}