export function SideNote({ children, title }: { children: React.ReactNode; title?: string }) {
    return (
        <aside className="my-6 p-4 bg-zinc-50 dark:bg-zinc-900/50 border-l-2 border-zinc-300 dark:border-zinc-700 text-sm text-zinc-600 dark:text-zinc-400 font-light italic rounded-r-lg lg:absolute lg:right-0 lg:w-64 lg:mr-[-20rem] lg:my-0 lg:p-0 lg:bg-transparent lg:dark:bg-transparent lg:border-0 lg:not-italic lg:rounded-none">
            {/* Mobile/Tablet view: distinct block */}
            {/* Desktop view: Absolute positioning to the right margin */}
            <span className="lg:block lg:text-xs lg:leading-relaxed">
                {title && <strong className="block mb-1 text-zinc-900 dark:text-zinc-200 not-italic">{title}</strong>}
                {children}
            </span>
        </aside>
    );
}