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

/**
 * # Form Element
 * @className twui-form
 */
export default function Form({
    ...props
}: DetailedHTMLProps<FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>) {
    return (
        <form
            {...props}
            className={twMerge(
                "flex flex-col items-stretch gap-2 w-full bg-transparent",
                "twui-form",
                props.className
            )}
        >
            {props.children}
        </form>
    );
}