import React, { FC, ReactNode } from "react";
import { Styles } from "@mantine/core/lib/core/styles-api/styles-api.types";
import useIsMobile from "@/hooks/utils/useIsMobile";
import InPlaceInputDesktop from "./InPlaceInputDesktop";
import InPlaceInputMobile from "./InPlaceInputMobile";

type Props = {
    value?: string;
    onChange: (value: string) => void;
    placeholder?: string;
    getChildren: (startEditing: () => void) => ReactNode;
    inputStyles?: Styles<any>;
    modalTitle?: string;
};

const InPlaceInput: FC<Props> = (props) => {
    const isMobile = useIsMobile();

    if (isMobile) {
        return <InPlaceInputMobile {...props} />;
    }

    return <InPlaceInputDesktop {...props} />;
};

export default InPlaceInput;
