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

/**
 * # Vertical and Horizontal Divider
 * @className twui-divider
 * @className twui-divider-horizontal
 * @className twui-divider-vertical
 */
export default function Divider({
    vertical,
    ...props
}: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
    vertical?: boolean;
}) {
    return (
        <div
            {...props}
            className={twMerge(
                "border-slate-200 dark:border-white/10",
                vertical
                    ? "border-0 border-l h-full min-h-5"
                    : "border-0 border-t w-full",
                "twui-divider",
                vertical ? "twui-divider-vertical" : "twui-divider-horizontal",
                props.className
            )}
        />
    );
}