import clsx from "clsx";
import React, {type ReactNode} from "react";

type BoxContainerProps = React.HTMLAttributes<HTMLDivElement> & {
    /** Content to render inside the container */
    children: ReactNode;
};

/**
 * Box Container for highlighting content
 *
 * Accepts any div attributes (e.g. `className`, `title`, `onClick`, or DnD listeners).
 */
export function BoxContainer({children, className, ...rest}: BoxContainerProps) {
    return (
        <div
            {...rest}
            className={clsx(
                "bg-gray-200 rounded p-2",
                className
            )}
        >
            {children}
        </div>
    );
}
