import React from "react";
import { type DividerProps, Divider as MUIDivider } from "@mui/material";
import { twMerge } from "../../../tailwind.config";

export interface MenuDividerProps extends Omit<DividerProps, "classes"> {
  ESCAPE_className?: string;
}

export const MenuDivider = ({
  ESCAPE_className,
  ...restProps
}: MenuDividerProps) => (
  <MUIDivider
    classes={{
      root: twMerge(
        "border-N30 my-8 w-[calc(100%+16px)] -translate-x-8",
        ESCAPE_className
      ),
    }}
    {...restProps}
  />
);
