import React from 'react';
import { motion } from 'motion/react';
import { ZoomIn, ZoomOut } from 'lucide-react';

interface ZoomControlProps {
  zoom: number;
  onZoomChange: (zoom: number) => void;
}

export const ZoomControl: React.FC<ZoomControlProps> = ({ zoom, onZoomChange }) => {
  const decreaseZoom = () => onZoomChange(Math.max(50, zoom - 10));
  const increaseZoom = () => onZoomChange(Math.min(200, zoom + 10));

  return (
    <div className="flex items-center gap-2 bg-zinc-900/80 rounded-lg border border-zinc-800 px-2 py-1">
      <motion.button
        onClick={decreaseZoom}
        whileHover={{ scale: 1.1 }}
        whileTap={{ scale: 0.9 }}
        className="p-1 text-zinc-400 hover:text-white transition-colors"
        aria-label="Zoom out"
      >
        <ZoomOut size={16} />
      </motion.button>
      
      <span className="text-xs font-medium text-zinc-300 min-w-[3rem] text-center">
        {zoom}%
      </span>
      
      <motion.button
        onClick={increaseZoom}
        whileHover={{ scale: 1.1 }}
        whileTap={{ scale: 0.9 }}
        className="p-1 text-zinc-400 hover:text-white transition-colors"
        aria-label="Zoom in"
      >
        <ZoomIn size={16} />
      </motion.button>
    </div>
  );
};