import { DetailedHTMLProps, HTMLAttributes, RefObject } from "react";
import { twMerge } from "tailwind-merge";

export type TWUI_BORDER_PROPS = DetailedHTMLProps<
    HTMLAttributes<HTMLDivElement>,
    HTMLDivElement
> & {
    spacing?: "normal" | "loose" | "tight" | "wide" | "tightest";
    componentRef?: RefObject<HTMLDivElement>;
};

/**
 * # Toggle Component
 * @className_wrapper twui-border
 */
export default function Border({
    spacing,
    componentRef,
    ...props
}: TWUI_BORDER_PROPS) {
    return (
        <div
            {...props}
            className={twMerge(
                "relative flex items-center gap-2 border border-solid rounded-default",
                "border-slate-200 dark:border-white/10",
                spacing
                    ? spacing == "normal"
                        ? "px-3 py-2"
                        : spacing == "tight"
                        ? "px-2 py-1"
                        : ""
                    : "px-3 py-2",
                "twui-border",
                props.className
            )}
            ref={componentRef}
        >
            {props.children}
        </div>
    );
}