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

export type MarginProps = PropsWithChildren<
  HTMLAttributes<HTMLDivElement> & {
    margin?: SpacingValue;
  }
>;

export function Margin({
  children,
  className,
  margin = "1rem",
  style,
  ...props
}: MarginProps) {
  return (
    <div className={cn(className)} style={{ ...edgeInsetsStyle(margin, "margin"), ...style }} {...props}>
      {children}
    </div>
  );
}