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

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

export function PanControls({ x, y }: PanControlsProps) {
  return (
    <div className="flex w-full items-center justify-center gap-2 tabular-nums">
      <span className={bottomControlIconSlotClass()}>
        <Hand size={16} 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>
  );
}