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

/**
 * # Input Element
 * @className twui-input
 */
export default function Input({
    ...props
}: DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>) {
    return (
        <input
            {...props}
            className={twMerge(
                "w-full px-4 py-2 border rounded-md",
                "border-slate-300 dark:border-white/20",
                "focus:border-slate-700 dark:focus:border-white/50",
                "outline-slate-300 dark:outline-white/20",
                "focus:outline-slate-700 dark:focus:outline-white/50",
                "bg-white dark:bg-black",
                "twui-input",
                props.className
            )}
        />
    );
}