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

export type CrossAxisAlignment = "start" | "center" | "end" | "stretch" | "baseline";
export type MainAxisAlignment =
  | "start"
  | "center"
  | "end"
  | "spaceBetween"
  | "spaceAround"
  | "spaceEvenly";

export type RowProps = PropsWithChildren<
  HTMLAttributes<HTMLDivElement> & {
    crossAxisAlignment?: CrossAxisAlignment;
    gap?: LayoutSpacing;
    mainAxisAlignment?: MainAxisAlignment;
    mainAxisSize?: "min" | "max";
    wrap?: boolean;
  }
>;

const alignClasses: Record<CrossAxisAlignment, string> = {
  baseline: "items-baseline",
  center: "items-center",
  end: "items-end",
  start: "items-start",
  stretch: "items-stretch",
};

const distributionClasses: Record<MainAxisAlignment, string> = {
  spaceAround: "justify-around",
  spaceBetween: "justify-between",
  center: "justify-center",
  end: "justify-end",
  spaceEvenly: "justify-evenly",
  start: "justify-start",
};

export function Row({
  children,
  className,
  crossAxisAlignment = "stretch",
  gap = 16,
  mainAxisAlignment = "start",
  mainAxisSize = "max",
  style,
  wrap = false,
  ...props
}: RowProps) {
  return (
    <div
      className={cn(
        "flex flex-row",
        alignClasses[crossAxisAlignment],
        distributionClasses[mainAxisAlignment],
        mainAxisSize === "min" ? "w-fit" : "w-full",
        wrap ? "flex-wrap" : "flex-nowrap",
        className,
      )}
      style={{ gap: resolveGap(gap, 16), ...style }}
      {...props}
    >
      {children}
    </div>
  );
}