import { OctagonAlert } from "lucide-react"

import { markdownToHtml } from "@/lib/markdown"
import { cn } from "@/lib/utils"

/**
 * Hinweis auf das Widerspruchsrecht nach Art. 21 DSGVO.
 *
 * Art. 21 Abs. 4 verlangt, dass darauf „ausdrücklich“ und „in einer
 * verständlichen und von anderen Informationen getrennten Form“ hingewiesen
 * wird. Deshalb ein eigener, farblich abgesetzter Kasten oberhalb der übrigen
 * Abschnitte – und nicht eine Zeile unter vielen.
 */
export async function ObjectionNotice({
  content,
  className,
}: {
  content?: string | null
  className?: string
}) {
  if (!content?.trim()) return null

  const html = await markdownToHtml(content)

  return (
    <aside
      aria-labelledby="widerspruchsrecht"
      className={cn(
        "rounded-lg border-2 border-brand/40 bg-brand/5 p-5",
        className
      )}
    >
      <h2
        id="widerspruchsrecht"
        className="mb-3 flex items-center gap-2 text-base font-semibold"
      >
        <OctagonAlert className="size-5 shrink-0 text-brand" />
        Ihr Widerspruchsrecht nach Art. 21 DSGVO
      </h2>
      <div
        className="markdown-content"
        dangerouslySetInnerHTML={{ __html: html }}
      />
    </aside>
  )
}