'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: ({ ...props }) => (
            <a
              {...props}
              className="text-brand-accent hover:text-brand hover:underline"
              // MAKE thIS SHIT DOWNLOAD
              target="_blank"
              rel="noopener"
            />
          ),
          code: ({ ...props }) => (
            <code
              {...props}
              className="cursor-pointer select-none text-transparent hover:text-highlight-secondary"
            />
          )
        }}
        remarkPlugins={[remarkGfm, remarkBreaks]}
      >
        {data}
      </Mardown>
    </div>
  );
}
