import React, {useState} from 'react';
import {Box, TextField, Button} from '@mui/material';
import {styled} from '@mui/material/styles';

// Стилизуем контейнер счетчика
const CounterContainer = styled(Box)`
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 50px;
    border-radius: 8px;
    //box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    //background-color: #ffffff;
`;

export function Counter({id, changeHandler}) {
    const [value, setValue] = useState(1);

    const handleChange = (newValue) => {
        setValue(newValue);
        changeHandler(id, newValue);
    }

    return (
        <Box>
            <Button onClick={() => {
                if (value > 0) {
                    setValue(value - 1);
                }
            }}
                    sx={{
                        width: '20px',
                        height: '55px',
                        borderRadius: '50%',
                        margin: '0 8px',
                        backgroundColor: 'transparent',
                    }}>−</Button>
            <TextField
                value={value}
                onChange={(e) => {
                    const newValue = parseInt(e.target.value, 10);
                    if (!isNaN(newValue)) {
                        handleChange(newValue);
                    }
                }}
                inputProps={{inputMode: 'numeric'}}
                sx={{
                    width: '40px',
                    height: '15px',
                    fontSize: '10px',
                    textAlign: 'center'
                }}
            />
            <Button onClick={() => handleChange(value + 1)}
                    sx={{
                        width: '20px',
                        height: '55px',
                        borderRadius: '50%',
                        margin: '0 8px',
                        backgroundColor: 'transparent',
                    }}>+</Button>
        </Box>
    );
}