import clsx from "clsx";
import React from "react";

type NumberCircleProps = React.HTMLAttributes<HTMLDivElement> & {
    /** The number displayed inside the circle */
    number: number;
};

/**
 * A small circular badge displaying a number.
 *
 * Can be used as a standalone indicator or as a drag handle.
 * Accepts any div attributes (e.g. `className`, `title`, `onClick`, or DnD listeners).
 */
export function NumberCircle({ number, className, ...rest }: NumberCircleProps) {
    return (
        <div
            {...rest}
    className={clsx(
        "flex-shrink-0 w-7 h-7 rounded-full bg-blue-300 text-white",
        "flex items-center justify-center shadow-sm",
        "cursor-default select-none",
        className
)}
>
    {number}
    </div>
);
}
