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

type Props = DetailedHTMLProps<
    HTMLAttributes<HTMLDivElement>,
    HTMLDivElement
> & {
    vertical?: boolean;
    dashed?: boolean;
};

/**
 * # Vertical and Horizontal Divider
 * @className twui-divider
 * @className twui-divider-horizontal
 * @className twui-divider-vertical
 */
export default function Divider({ vertical, dashed, ...props }: Props) {
    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",
                dashed ? "border-dashed" : "border-solid",
                props.className
            )}
        />
    );
}