import React, { forwardRef, Ref } from "react";
import {
  DialogContent as MuiDialogContent,
  type DialogContentProps as MuiDialogContentProps,
} from "@mui/material";

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

export interface DialogContentProps
  extends Omit<MuiDialogContentProps, "className" | "classes"> {
  scrollDetector?: JSX.Element | undefined;
  long?: boolean;
  innerRef?: Ref<HTMLDivElement>;
  ESCAPE_className?: string;
}

export const DialogContent = forwardRef<HTMLElement, DialogContentProps>(
  (
    {
      children,
      long = false,
      scrollDetector,
      innerRef,
      ESCAPE_className,
      ...other
    },
    ref
  ) => {
    return (
      <MuiDialogContent
        classes={{
          root: twMerge(
            "z-10 p-24",
            !long && "pb-[3px] last:pb-24",
            "docoli-dialog-content",
            ESCAPE_className
          ),
        }}
        ref={ref}
        {...other}
      >
        {scrollDetector}
        <div ref={innerRef}>{children}</div>
      </MuiDialogContent>
    );
  }
);
