'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(className)}>
      <Mardown
        components={{
          a: ({ node, ...props }) => (
            <a
              {...props}
              className="text-brand hover:text-brand/80 hover:underline"
              download={node}
              target="_blank"
              rel="noreferrer"
            />
          ),
          code: ({ ...props }) => (
            <span
              {...props}
              className="cursor-pointer select-none rounded bg-black p-0.5 text-black hover:bg-transparent hover:text-white"
            />
          )
        }}
        remarkPlugins={[remarkGfm, remarkBreaks]}
      >
        {data}
      </Mardown>
    </div>
  );
}
