import { PortableText, PortableTextReactComponents } from '@portabletext/react'

const components: Partial<PortableTextReactComponents> = {
  types: {
    image: ({ value }) => {
      // Basic rendering for inline images; can be enhanced with sanity image builder
      // eslint-disable-next-line @next/next/no-img-element
      return <img src={value?.asset?.url} alt={value?.alt || ''} className="my-6 rounded-xl" />
    },
  },
  block: {
    h1: ({ children }) => <h1 className="mt-8 text-3xl font-bold leading-tight text-slate-900 dark:text-slate-100">{children}</h1>,
    h2: ({ children }) => <h2 className="mt-8 text-2xl font-semibold leading-tight text-slate-900 dark:text-slate-100">{children}</h2>,
    h3: ({ children }) => <h3 className="mt-6 text-xl font-semibold leading-tight text-slate-900 dark:text-slate-100">{children}</h3>,
    normal: ({ children }) => <p className="mt-4 leading-7 text-slate-700 dark:text-slate-300">{children}</p>,
    blockquote: ({ children }) => (
      <blockquote className="mt-6 border-l-4 border-slate-300 dark:border-slate-600 pl-4 italic text-slate-600 dark:text-slate-300">{children}</blockquote>
    ),
  },
  list: {
    bullet: ({ children }) => <ul className="mt-4 list-disc pl-6 space-y-2">{children}</ul>,
    number: ({ children }) => <ol className="mt-4 list-decimal pl-6 space-y-2">{children}</ol>,
  },
  marks: {
    strong: ({ children }) => <strong className="font-semibold">{children}</strong>,
    em: ({ children }) => <em className="italic">{children}</em>,
    link: ({ value, children }) => (
      <a href={value?.href} className="text-brand-600 underline hover:text-brand-700 dark:text-brand-400 dark:hover:text-brand-300" target="_blank" rel="noopener noreferrer">
        {children}
      </a>
    ),
    code: ({ children }) => (
      <code className="rounded bg-slate-100 px-1.5 py-0.5 font-mono text-[0.9em] text-slate-800 dark:text-slate-200 dark:bg-slate-800">{children}</code>
    ),
  },
}

export default function ArticleBody({ value }: { value: any }) {
  if (!value) return null
  return (
    <div className="prose prose-slate max-w-none dark:prose-invert">
      <PortableText value={value} components={components} />
    </div>
  )
}