import type { HTMLAttributes, PropsWithChildren } from "react";
import { cn } from "../../lib/cn";
import { toCssSize, type LayoutSpacing } from "./layout-primitives";

export type SizedBoxProps = PropsWithChildren<
  HTMLAttributes<HTMLDivElement> & {
    height?: LayoutSpacing;
    width?: LayoutSpacing;
  }
>;

export function SizedBox({ children, className, height, style, width, ...props }: SizedBoxProps) {
  return (
    <div
      className={cn("shrink-0", className)}
      style={{ height: toCssSize(height), width: toCssSize(width), ...style }}
      {...props}
    >
      {children}
    </div>
  );
}