import React, { FC } from "react";
import {
  DialogActions as MUIDialogActions,
  type DialogActionsProps as MUIDialogActionsProps,
} from "@mui/material";

import { twMerge } from "../../../tailwind.config";

export interface DialogActionsProps
  extends Omit<MUIDialogActionsProps, "className"> {
  collapsed?: boolean;
  long?: boolean;
  ESCAPE_className?: string;
}

export const DialogActions = ({
  children,
  collapsed = false,
  long = false,
  ESCAPE_className,
  ...restProps
}: DialogActionsProps) => (
  <MUIDialogActions
    classes={{
      root: twMerge(
        "bg-N0 flex items-center justify-between transition-padding duration-200 sticky bottom-0",
        collapsed ? "p-16" : "p-24",
        collapsed && !long ? "pt-24" : undefined,
        long ? "border-t-1 border-solid border-N30" : "0",
        ESCAPE_className
      ),
    }}
    {...restProps}
  >
    {children}
  </MUIDialogActions>
);

DialogActions.Space = (() => <div style={{ flex: 1 }} />) as FC;
DialogActions.Space.displayName = "DialogActions.Space";
