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

export type CenterProps = PropsWithChildren<
  HTMLAttributes<HTMLDivElement> & {
    axis?: "both" | "x" | "y";
    inline?: boolean;
  }
>;

export function Center({
  axis = "both",
  children,
  className,
  inline = false,
  ...props
}: CenterProps) {
  return (
    <div
      className={cn(
        inline ? "inline-flex" : "flex",
        axis === "both" || axis === "x" ? "justify-center" : "",
        axis === "both" || axis === "y" ? "items-center" : "",
        className,
      )}
      {...props}
    >
      {children}
    </div>
  );
}