import { Minus, CornersOut, Plus } from "@phosphor-icons/react";
import type { DocumentActions } from "@app/document-actions";
import { BottomControlDivider } from "./Divider";
import { bottomControlButtonClass, bottomControlMenuClass, bottomControlValueClass } from "./styles";

export type ZoomControlsProps = {
  zoomPercent: number;
  actions: DocumentActions;
};

export function ZoomControls({ zoomPercent, actions }: ZoomControlsProps) {
  return (
    <div className={bottomControlMenuClass()}>
      <button type="button" className={bottomControlButtonClass()} aria-label="Zoom out" onClick={() => actions.zoomBy(1 / 1.2)}>
        <Minus size={24} weight="regular" />
      </button>
      <span className={bottomControlValueClass()}>{zoomPercent}%</span>
      <button type="button" className={bottomControlButtonClass()} aria-label="Zoom in" onClick={() => actions.zoomBy(1.2)}>
        <Plus size={24} weight="regular" />
      </button>
      <BottomControlDivider />
      <button type="button" className={bottomControlButtonClass()} aria-label="Fit artboard" title="Fit artboard" onClick={() => actions.fitArtboard()}>
        <CornersOut size={24} weight="regular" />
      </button>
    </div>
  );
}