import { FC, ReactNode } from "react";
import { modals } from "@mantine/modals";

type Props = {
    value?: string;
    onChange: (value: string) => void;
    getChildren: (startEditing: () => void) => ReactNode;
    modalTitle?: string;
};

const InPlaceInputMobile: FC<Props> = ({
    onChange,
    getChildren,
    modalTitle = "",
    value = "",
}) => {
    const onStartCreating = () => {
        modals.openContextModal({
            modal: "enterNameModal",
            title: modalTitle,
            withCloseButton: true,
            innerProps: {
                onChange: values => onChange(values.name),
                value: { name: value },
            },
        });
    };

    return getChildren(onStartCreating);
};

export default InPlaceInputMobile;
