'use client';

import { cn } from '@/lib/utils';
import Mardown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import remarkBreaks from 'remark-breaks';

export default function ToHTML({ data, className }: { data: string; className?: string }) {
  return (
    <div className={cn('select-none', className)}>
      <Mardown
        components={{
          a: ({ node, ...props }) => (
            <a {...props} className="text-brand" download={node} target="_blank" rel="noreferrer" />
          )
        }}
        remarkPlugins={[remarkGfm, remarkBreaks]}
      >
        {data}
      </Mardown>
    </div>
  );
}
