import { useDesignStore } from '../store/designStore';

function ZoomControls() {
  const zoom = useDesignStore((s) => s.zoom);
  const zoomIn = useDesignStore((s) => s.zoomIn);
  const zoomOut = useDesignStore((s) => s.zoomOut);

  const pct = Math.round(zoom * 100);

  return (
    <div className="flex items-center gap-2 bg-white/10 backdrop-blur-sm rounded-lg px-3 py-1.5">
      <button
        type="button"
        onClick={zoomOut}
        aria-label="Uzaklaştır"
        className="w-7 h-7 flex items-center justify-center rounded bg-white/10 text-white hover:bg-white/20 transition-colors text-lg leading-none"
      >
        −
      </button>
      <span className="text-xs text-white/80 min-w-[3ch] text-center">
        {pct}%
      </span>
      <button
        type="button"
        onClick={zoomIn}
        aria-label="Yakınlaştır"
        className="w-7 h-7 flex items-center justify-center rounded bg-white/10 text-white hover:bg-white/20 transition-colors text-lg leading-none"
      >
        +
      </button>
    </div>
  );
}

export default ZoomControls;
