import React from "react";

import "./ImageResizer.scss";

interface ImageResizerType {
  size: number,
  setSize: Function,
}

interface SizeInfoType {
  max: number,
  min: number,
  gap: number,
}

const SIZE_INFO: SizeInfoType = {
  max: 3,
  min: 1,
  gap: 1
};

function ImageResizer({ size, setSize }: ImageResizerType) {
  const handleResize = (isMagnify: boolean) => {
    if (isMagnify) {  // 확대
      if (size >= SIZE_INFO.max) return;
      setSize(size += SIZE_INFO.gap);
      return;
    }

    // 축소
    if (size <= SIZE_INFO.min) {
      return;
    }
    setSize(size -= SIZE_INFO.gap);
  };

  return (
    <div className="image-resize-button">
      <button onClick={() => handleResize(true)}><i className="fas fa-search-plus" /></button>
      <button onClick={() => handleResize(false)}><i className="fas fa-search-minus" /></button>
    </div>
  );
}

export default ImageResizer;