import clsx from "clsx";
import { FC } from "react";

import {
  Dialog as TtuiDialog,
  DialogProps as TtuiDialogProps,
} from "@dndbeyond/ttui/components/Dialog";

import styles from "./styles.module.css";

/**
 * A wrapper around the TTUI Dialog component to apply custom styles. This is necessary because the
 * transform property conflicts with styles for the select component. Using this component to
 * remove those styles resolves the issue.
 */

export interface DialogProps extends TtuiDialogProps {}

export const Dialog: FC<DialogProps> = ({ className, ...props }) => {
  return <TtuiDialog className={clsx(styles.dialog, className)} {...props} />;
};