import Markdown from 'react-markdown';
import remarkGfm from 'remark-gfm';

const TailwindMarkdown: React.FC<{ content: string }> = ({ content }) => {
  return (
    <Markdown
      className='prose prose-sm sm:prose lg:prose-lg xl:prose-xl'
      remarkPlugins={[remarkGfm]}
      components={{
        h1: ({ node: _node, ...props }) => (
          <h1 className='text-2xl font-bold' {...props} />
        ),
        h2: ({ node: _node, ...props }) => (
          <h2 className='text-xl font-bold' {...props} />
        ),
        h3: ({ node: _node, ...props }) => (
          <h3 className='text-lg font-bold' {...props} />
        ),
        p: ({ node: _node, ...props }) => <p className='m-0' {...props} />,
        a: ({ node: _node, ...props }) => (
          <a
            className='text-primary-500 inline-block hover:underline'
            target='_blank'
            {...props}
          />
        ),
        ul: ({ node: _node, ...props }) => (
          <ul className='list-disc list-inside' {...props} />
        ),
        ol: ({ node: _node, ...props }) => (
          <ol className='list-decimal list-inside' {...props} />
        ),
        blockquote: ({ node: _node, ...props }) => (
          <blockquote
            className='border-l-4 border-default-300 pl-4 italic'
            {...props}
          />
        ),
        code: ({ node: _node, ...props }) => (
          <code className='bg-default-100 p-1 rounded text-xs' {...props} />
        ),
      }}
    >
      {content}
    </Markdown>
  );
};

export default TailwindMarkdown;