import type { ReactNode } from 'react'
import ReactMarkdown from 'react-markdown'
import rehypeRaw from 'rehype-raw'
import rehypeSanitize from 'rehype-sanitize'
import remarkGfm from 'remark-gfm'
import { PhotoProvider, PhotoView } from 'react-photo-view'

interface MarkdownDetailProps {
  children: ReactNode
}

export const MarkdownDetail: React.FC<MarkdownDetailProps> = ({ children }) => {
  return (
    <ReactMarkdown
      rehypePlugins={[rehypeRaw, rehypeSanitize]}
      remarkPlugins={[remarkGfm]}
      className="flex flex-col gap-[12px] text-[#27353C] text-[15px]"
      components={{
        img: ({ ...data }): JSX.Element => (
          <PhotoProvider maskOpacity={0.1} bannerVisible={false}>
            <PhotoView {...(data as any)}>
              <img className="w-2/3 cursor-pointer mt-[24px] mb-[8px]" {...data} />
            </PhotoView>
          </PhotoProvider>
        ),
        p(data): JSX.Element {
          return <p className="leading-[24px] break-words w-full" {...data} />
        },
        ul(data): JSX.Element {
          return <ul className="mb-[24px]" {...data} />
        },
        strong(data): JSX.Element {
          return <strong className="text-[#27353C]" {...data} />
        },
      }}
    >
      {children as string}
    </ReactMarkdown>
  )
}
