import { ReactNode, CSSProperties, RefObject } from "react";
import { Div } from "./Div";
import { useTheme } from "@/theme/ThemeContext";

export type InputProps = {
    ref?: RefObject<any>;
    value?: string;
    onChange?: (e) => void;
    style?: Omit<CSSProperties, "fontSize" | "fontWeight" | "color">;
};

export const Input = ({
    ref,
    value,
    onChange,
    style,
}: InputProps) => {
    const { convertStyle } = useTheme();
    const themedStyle = style ? convertStyle(style) : undefined;
    return (
        <input
            ref={ref}
            value={value}
            onChange={onChange}
            style={themedStyle}
        >
        </input>
    );
};