import type { HTMLAttributes, PropsWithChildren } from "react";
import { cn } from "../../lib/cn";

export type StackProps = PropsWithChildren<
  HTMLAttributes<HTMLDivElement> & {
    alignment?: "bottomCenter" | "bottomLeft" | "bottomRight" | "center" | "topCenter" | "topLeft" | "topRight";
    fit?: "expand" | "loose" | "passthrough";
  }
>;

const alignmentClasses: Record<NonNullable<StackProps["alignment"]>, string> = {
  bottomCenter: "items-end justify-center",
  bottomLeft: "items-end justify-start",
  bottomRight: "items-end justify-end",
  center: "items-center justify-center",
  topCenter: "items-start justify-center",
  topLeft: "items-start justify-start",
  topRight: "items-start justify-end",
};

export function Stack({
  alignment = "topLeft",
  children,
  className,
  fit = "loose",
  ...props
}: StackProps) {
  return (
    <div
      className={cn(
        "relative grid [&>*]:col-start-1 [&>*]:row-start-1",
        alignmentClasses[alignment],
        fit === "expand" ? "size-full" : "",
        className,
      )}
      {...props}
    >
      {children}
    </div>
  );
}