import { BoundingBox } from "@phosphor-icons/react";
import type { Rect } from "@core/geometry";
import { BottomControlDivider } from "./Divider";
import { bottomControlIconSlotClass, bottomControlLabelClass, bottomControlValueClass } from "./styles";

export type TransformControlsProps = {
  bounds: Rect;
};

export function TransformControls({ bounds }: TransformControlsProps) {
  return (
    <div className="flex w-full items-center justify-center gap-2 tabular-nums">
      <span className={bottomControlIconSlotClass()}>
        <BoundingBox size={16} weight="regular" />
      </span>
      <BottomControlDivider />
      <span className={bottomControlLabelClass()}>X</span>
      <span className={bottomControlValueClass()}>{Math.round(bounds.x)}</span>
      <span className={bottomControlLabelClass()}>Y</span>
      <span className={bottomControlValueClass()}>{Math.round(bounds.y)}</span>
      <BottomControlDivider />
      <span className={bottomControlLabelClass()}>W</span>
      <span className={bottomControlValueClass()}>{Math.round(bounds.w)}</span>
      <span className={bottomControlLabelClass()}>H</span>
      <span className={bottomControlValueClass()}>{Math.round(bounds.h)}</span>
    </div>
  );
}