import React from "react";
import { Stack, Typography } from "@mui/material";
import LtrTextField from "@/core/components/LtrTextField";
import InputAdornment from "@mui/material/InputAdornment";

const NumberField = React.forwardRef((props, ref) => {
    return (
        <LtrTextField
            {...props}
            ref={ref}
            InputProps={{
                startAdornment: (
                    <InputAdornment position="start">
                        <Stack direction="row" alignItems="center" spacing={0.5}>
                            <Typography sx={{ margin: 1 }} component="span">
                                {(props.value / 1).toLocaleString()}
                            </Typography>
                            <Typography component="span" variant="caption">
                                {props.unit}
                            </Typography>
                        </Stack>
                    </InputAdornment>
                ),
            }}
        />
    );
});
NumberField.displayName = "NumberField";
export default NumberField;