"use client"; 

import React from "react";
import { cn } from "@/lib/utils";

interface InfoBoxProps extends React.HTMLAttributes<HTMLDivElement> {
  title: string;
}

export function InfoBox({ title, children, className, ...props }: InfoBoxProps) {
  return (
    <aside
      className={cn(
        "not-prose relative mt-4 mb-8 p-4 border rounded-lg shadow-sm bg-card text-card-foreground",
        // --- FIX IS HERE: Tell the InfoBox to clear the left float on desktop ---
        "md:float-right md:w-64 md:ml-4 md:mb-4 md:clear-left",
        className
      )}
      {...props}
    >
      <h3 className="font-bold mt-0 mb-2 text-lg">{title}</h3>
      <div className="text-sm space-y-2">{children}</div>
    </aside>
  );
}