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

export type PaddingProps = PropsWithChildren<
  HTMLAttributes<HTMLDivElement> & {
    padding?: SpacingValue;
  }
>;

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