'use client';

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

export default function ToHTML({ data, className }: { data: string; className?: string }) {
  return (
    <div className={cn(className)}>
      <Mardown
        components={{
          a: ({ node, ...props }) => (
            <a
              {...props}
              className="inline text-brand-accent hover:text-brand hover:underline"
              // MAKE thIS SHIT DOWNLOADABLE
              target="_blank"
              rel="noopener"
            />
          ),
          code: ({ node, ...props }) => (
            <code
              {...props}
              className="cursor-default select-none text-transparent transition-colors delay-150 hover:text-highlight-secondary"
            />
          )
        }}
        remarkPlugins={[remarkGfm, remarkBreaks]}
      >
        {data}
      </Mardown>
    </div>
  );
}