components/ZoomSlider.tsx

import React from 'react';

interface ZoomSliderProps {
  zoomLevel: number;
  onZoomChange: (newZoomLevel: number) => void;
}

const ZoomSlider: React.FC<ZoomSliderProps> = ({ zoomLevel, onZoomChange }) => {
  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    onZoomChange(parseFloat(event.target.value));
  };

  const zoomPercentage = Math.round(zoomLevel * 100);

  return (
    <div 
      className="fixed bottom-4 left-1/2 -translate-x-1/2 z-30 bg-slate-700 bg-opacity-80 backdrop-blur-sm text-white p-3 rounded-lg shadow-xl flex items-center space-x-3"
      role="toolbar"
      aria-label="Zoom controls"
    >
      <label htmlFor="zoom-slider" className="text-xs font-medium whitespace-nowrap">
        Zoom: <span className="font-bold">{zoomPercentage}%</span>
      </label>
      <input
        type="range"
        id="zoom-slider"
        min="0.2" // 20%
        max="3.0" // 300%
        step="0.01"
        value={zoomLevel}
        onChange={handleChange}
        className="w-32 md:w-40 h-2 bg-slate-500 rounded-lg appearance-none cursor-pointer accent-sky-500"
        aria-valuemin={20}
        aria-valuemax={300}
        aria-valuenow={zoomPercentage}
        aria-label={`Current zoom level ${zoomPercentage} percent`}
      />
    </div>
  );
};

export default ZoomSlider;