import { Hand } from "@phosphor-icons/react";
import { BottomControlDivider } from "./Divider";
import { bottomControlIconSlotClass, bottomControlLabelClass, bottomControlMenuClass, bottomControlValueClass } from "./styles";

export type PanControlsProps = {
  x: number;
  y: number;
};

export function PanControls({ x, y }: PanControlsProps) {
  return (
    <div className={bottomControlMenuClass()}>
      <span className={bottomControlIconSlotClass()}>
        <Hand size={24} weight="regular" />
      </span>
      <BottomControlDivider />
      <span className={bottomControlLabelClass()}>X</span>
      <span className={bottomControlValueClass()}>{x}</span>
      <BottomControlDivider />
      <span className={bottomControlLabelClass()}>Y</span>
      <span className={bottomControlValueClass()}>{y}</span>
    </div>
  );
}