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

export type PositionedProps = PropsWithChildren<
  HTMLAttributes<HTMLDivElement> & {
    bottom?: LayoutSpacing;
    inset?: LayoutSpacing;
    left?: LayoutSpacing;
    right?: LayoutSpacing;
    top?: LayoutSpacing;
    zIndex?: number;
  }
>;

export function Positioned({
  bottom,
  children,
  className,
  inset,
  left,
  right,
  style,
  top,
  zIndex,
  ...props
}: PositionedProps) {
  const positionStyle: CSSProperties = {
    bottom: toCssSize(bottom ?? inset),
    left: toCssSize(left ?? inset),
    right: toCssSize(right ?? inset),
    top: toCssSize(top ?? inset),
    zIndex,
    ...style,
  };

  return (
    <div className={cn("absolute", className)} style={positionStyle} {...props}>
      {children}
    </div>
  );
}