import classNames from "classnames";
import style from "./TextFromTo.module.css";

export type TextFromToWidth = "80%" | "100%";

export interface TextFromToProps {
    label: string;
    from: string;
    to: string;
    width?: TextFromToWidth;
    onChangeFrom: (e: React.ChangeEvent<HTMLInputElement>) => void;
    onChangeTo: (e: React.ChangeEvent<HTMLInputElement>) => void;
}
export default function TextFromTo(props: TextFromToProps): React.ReactElement {
    const { width = "80%" } = props;
    /* eslint-disable @typescript-eslint/no-explicit-any */
    const getWidth = (base: any) => {
        if (width === "100%") {
            return classNames(base, style.textFromToWidth100);
        } else if (width === "80%") {
            return classNames(base, style.textFromToWidth80);
        }
        return classNames(base, style.textFromToWidth80);
    };

    return (
        <>
            <div className={getWidth(style.textFromToLabel)}>{props.label}</div>
            <div className={getWidth(style.textFromTo)}>
                <input
                    type="text"
                    value={props.from}
                    onChange={props.onChangeFrom}
                    placeholder="Desde"
                />
                <input
                    type="text"
                    value={props.to}
                    onChange={props.onChangeTo}
                    placeholder="Hasta"
                />
            </div>
        </>
    );
}
