import type { FormHTMLAttributes, HTMLAttributes, ReactNode } from "react";

export type DialogActionAlignment = "start" | "between" | "end";

export type DialogActionsProps = HTMLAttributes<HTMLDivElement> & {
  children: ReactNode;
  align?: DialogActionAlignment;
};

export function DialogActions({ children, align = "end", className = "", ...props }: DialogActionsProps) {
  return (
    <div {...props} className={["dialog-actions", `dialog-actions-${align}`, className].filter(Boolean).join(" ")}>
      {children}
    </div>
  );
}

export type DialogFormProps = FormHTMLAttributes<HTMLFormElement> & {
  children: ReactNode;
  spacing?: "compact" | "default" | "loose";
};

export function DialogForm({ children, spacing = "default", className = "", ...props }: DialogFormProps) {
  return (
    <form {...props} className={["dialog-form-layout", `dialog-form-spacing-${spacing}`, className].filter(Boolean).join(" ")}>
      {children}
    </form>
  );
}

export type DialogSectionProps = HTMLAttributes<HTMLDivElement> & {
  children: ReactNode;
  variant?: "plain" | "separated" | "inset";
};

export function DialogSection({ children, variant = "plain", className = "", ...props }: DialogSectionProps) {
  return (
    <div {...props} className={["dialog-section-layout", `dialog-section-${variant}`, className].filter(Boolean).join(" ")}>
      {children}
    </div>
  );
}