import React from 'react';
import ReactMarkdown from 'react-markdown';
import rehypeRaw from 'rehype-raw';
import { twMerge } from 'tailwind-merge';

interface FaqAnswerMarkdownProps {
  answer: string;
  className?: string;
}

/**
 * Shared component for rendering FAQ answer markdown.
 * Used in both FAQ display and contest editor preview to ensure consistent styling.
 */
export function FaqAnswerMarkdown({
  answer,
  className,
}: FaqAnswerMarkdownProps) {
  return (
    <div className={twMerge('text-md markdown-content', className)}>
      <ReactMarkdown
        rehypePlugins={[rehypeRaw]}
        components={{
          p: ({ node, ...props }) => <p className='mb-2' {...props} />,
          strong: ({ node, ...props }) => (
            <strong
              className='font-semibold text-foreground-primary'
              {...props}
            />
          ),
          ul: ({ node, ...props }) => <ul className='my-2 ml-4' {...props} />,
          li: ({ node, ...props }) => (
            <li className='mb-1 flex' {...props}>
              <span className='mr-2'>•</span>
              <span>{props.children}</span>
            </li>
          ),
          a: ({ node, ...props }) => (
            <a className='text-foreground-primary underline' {...props}>
              {props.children}
            </a>
          ),
        }}
      >
        {answer}
      </ReactMarkdown>
    </div>
  );
}