import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import './ZoomControl.scss';
import Icon from '../Icon';
import Typography from '../Typography';
const ZoomControl = ({ value, min = 10, max = 200, step = 10, onChange, className = '', }) => {
    const handleChange = (e) => {
        const newValue = Number(e.target.value);
        const clamped = Math.max(min, Math.min(max, newValue));
        onChange(clamped);
    };
    const zoomIn = () => {
        const newValue = Math.min(value + step, max);
        onChange(newValue);
    };
    const zoomOut = () => {
        const newValue = Math.max(value - step, min);
        onChange(newValue);
    };
    return (_jsxs("div", { className: `ff-zoom ${className}`, children: [_jsx("input", { type: "range", min: min, max: max, step: step, value: value, onChange: handleChange, className: "ff-zoom__slider" }), _jsxs("div", { className: "ff-zoom__controls", children: [_jsx(Icon, { onClick: zoomOut, disabled: value <= min, name: "window_minimize", className: "ff-zoom-icon", color: "var(--text-color)", width: 10, height: 24 }), _jsx(Typography, { fontSize: 12, fontWeight: "regular", children: "Zoom" }), _jsx(Icon, { onClick: zoomIn, disabled: value >= max, name: "add_file", className: "ff-zoom-icon", color: "var(--text-color)", width: 12, height: 24 })] })] }));
};
export default ZoomControl;
//# sourceMappingURL=ZoomControl.js.map