import { cn } from '@/lib/utils';

/**
 * A comment or note as its author meant it: bold stays bold, a pasted list
 * stays a list, and a blank line stays a blank line.
 *
 * The html is never the raw value from the browser. It arrives sanitized from
 * `App\Support\Html` on the server, which allows the tags and links the editor
 * can produce and drops everything else, so this component only ever renders a
 * value that has already passed that check. Nothing else should call
 * `dangerouslySetInnerHTML` with a stored note.
 *
 * Plain text is safe here too: the server escapes it and keeps its line breaks,
 * so an imported note that has never seen a tag still reads as written.
 */
export function RichText({
    html,
    className,
}: {
    html: string | null | undefined;
    className?: string;
}) {
    if (!html) {
        return null;
    }

    return (
        <div
            className={cn(
                'text-sm leading-relaxed',
                '[&_a]:text-solar [&_a]:underline',
                '[&_blockquote]:border-l-2 [&_blockquote]:border-hairline [&_blockquote]:pl-3 [&_blockquote]:text-muted-foreground',
                '[&_code]:rounded [&_code]:bg-muted [&_code]:px-1 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-xs',
                '[&_h2]:mb-2 [&_h2]:text-base [&_h2]:font-semibold',
                '[&_h3]:mb-2 [&_h3]:font-semibold',
                '[&_ol]:mb-2 [&_ol]:list-decimal [&_ol]:pl-5',
                '[&_p]:mb-2 [&_p:last-child]:mb-0',
                '[&_pre]:mb-2 [&_pre]:overflow-x-auto [&_pre]:rounded-md [&_pre]:bg-muted [&_pre]:p-3 [&_pre]:text-xs',
                '[&_ul]:mb-2 [&_ul]:list-disc [&_ul]:pl-5',
                className,
            )}
            dangerouslySetInnerHTML={{ __html: html }}
        />
    );
}