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

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

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