import { Editable } from "@chakra-ui/react";
import { FC } from "react";

interface InputProps {
  value?: string;
  onChange?: (value: string) => void;
  defaultValue?: string;
  placeholder?: string;
  props?: any;
  type?:string
  isDisabled?: boolean;
}
const EditableInput: FC<InputProps> = ({
  value,
  onChange,
  defaultValue,
  placeholder,
  type,
  isDisabled,
  ...props
}) => {
  return (
    <Editable.Root
      {...props}
      value={value}
      onChange={() => onChange && onChange}
      w={"100%"}
      size={"sm"}
      textAlign="start"
      defaultValue={defaultValue || ""}
    >
      <Editable.Preview
        bg={"#00000006"}
        fontSize={"xs"}
        w={"100%"}
        bgSize={"sm"}
        ps={3}
        // _hover={{ backgroundColor: "#00000010" }}
      />
      <Editable.Input
        fontSize={"xs"}
        placeholder={placeholder}
        w={"100%"}
        border={"#ccc 1px solid"}
        type={type}
        _focus={{ bg: "#02A0A015" }}
        outline={"#007F33"}
        bgSize={"xs"}
        ps={3}
        disabled={isDisabled}
      />
    </Editable.Root>
  );
};

export default EditableInput;