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

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

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 Column({
  children,
  className,
  crossAxisAlignment = "stretch",
  gap = 16,
  mainAxisAlignment = "start",
  mainAxisSize = "max",
  style,
  ...props
}: ColumnProps) {
  return (
    <div
      className={cn(
        "flex flex-col",
        alignClasses[crossAxisAlignment],
        distributionClasses[mainAxisAlignment],
        mainAxisSize === "min" ? "h-fit" : "h-full",
        className,
      )}
      style={{ gap: resolveGap(gap, 16), ...style }}
      {...props}
    >
      {children}
    </div>
  );
}