import { Box, Slider } from '@mui/material';
import { memo } from 'react';

const sliderContainerSx = { width: 200, height: '2.5rem', display: 'flex', alignItems: 'center', gap: 2 };
const zoomMarks = [
	{ value: 0.5, label: '50%' },
	{ value: 1, label: '100%' },
	{ value: 2, label: '200%' },
];

const ZoomSlider = ({ onChange, width = 200, curScale }) => {
	const handleChange = (_event, newValue) => {
		if (onChange) onChange(newValue);
	};

	return (
		<Box sx={width === 200 ? sliderContainerSx : { ...sliderContainerSx, width }}>
			<Slider
				value={curScale}
				onChange={handleChange}
				min={0.5}
				max={2}
				step={0.01}
				valueLabelDisplay='auto'
				valueLabelFormat={(value) => `${Math.round(value * 100)}%`}
				marks={zoomMarks}
			/>
		</Box>
	);
};

export default memo(ZoomSlider);