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

const ZoomSlider = ({ onChange, width = 200, curScale }) => {
  const [scale, setScale] = useState(curScale);

  const handleChange = (event, newValue) => {
    setScale(newValue);
    if (onChange) onChange(newValue);
  };

  return (
    <Box sx={{ width, display: 'flex', alignItems: 'center', gap: 2 }}>
      <Slider
        value={scale}
        onChange={handleChange}
        min={0.5}
        max={2}
        step={0.01}
        valueLabelDisplay="auto"
        valueLabelFormat={(value) => `${Math.round(value * 100)}%`}
        marks={[
          { value: 0.5, label: '50%' },
          { value: 1, label: '100%' },
          { value: 2, label: '200%' },
        ]}
      />
    </Box>
  );
};

export default ZoomSlider;
