ProductTam

import { useState } from "react";
import ReactTooltip from "react-tooltip";
import { numberFormatter } from "./helpers/helper";

const ProductTam = ({ product, state }) => {
    // console.log(product)
    const [inputValue, setInputValue] = useState(product[state.key]); //numbers
    // const [inputValue, setInputValue] = useState(calculatedProductWhitespaceAmount);
    const [showInput, setShowInput] = useState(true)
    const [showNumberInput, setShowNumberInput] = useState(false)
    const handleChange = (e) => {
        const { value } = e.target;
        setInputValue(value);
    };
    return (
        <td className={`px-6 text-center whitespace-nowrap text-sm text-gray-700`}>
            <div className="flex group justify-center my-1">
                {showNumberInput && <input
                    data-tip data-for='inputValue'
                    type="number"
                    min="0"
                    onMouseLeave={() => {
                        setShowInput(true)
                        setShowNumberInput(false)
                    }}
                    className="w-12 hover:border placeholder-black bg-inherit hover:w-32 flex justify-end pl-3 items-start hover:border-black"
                    onChange={(e, index) => handleChange(e, index)}
                    value={inputValue}
                />}
                {showInput && <input
                    data-tip data-for='inputValue'
                    onMouseOver={() => {
                        setShowInput(false)
                        setShowNumberInput(true)
                    }}
                    className="w-12 hover:border placeholder-black bg-inherit hover:w-32 flex justify-end pl-3 items-start hover:border-black"
                    onChange={(e, index) => handleChange(e, index)}
                    value={numberFormatter(inputValue)}
                />}
                <ReactTooltip backgroundColor="grey" id='inputValue' place="top" effect="solid">
                    Type in the full number, for $1M, type 1000000
                </ReactTooltip>
            </div>
        </td>

    )
}
export default ProductTam