Alert Dialog

"use client";

import { AlertDialog } from "@base-ui/react/alert-dialog";
import type React from "react";
import { cn } from "@/lib/utils";
import styles from "./alert-dialog.module.css";

function AlertDialogRoot({ ...props }: AlertDialog.Root.Props) {
  return <AlertDialog.Root {...props} />;
}

function AlertDialogTrigger({ ...props }: AlertDialog.Trigger.Props) {
  return <AlertDialog.Trigger data-slot="alert-dialog-trigger" nativeButton {...props} />;
}

const AlertDialogPortal = AlertDialog.Portal;

function AlertDialogBackdrop({ className, ...props }: AlertDialog.Backdrop.Props) {
  return (
    <AlertDialog.Backdrop className={cn(styles.overlay, className)} data-slot="alert-dialog-backdrop" {...props} />
  );
}

function AlertDialogPopup({ className, children, ...props }: AlertDialog.Popup.Props) {
  return (
    <AlertDialogPortal>
      <AlertDialog.Popup className={cn(styles.content, className)} data-slot="alert-dialog-popup" {...props}>
        {children}
      </AlertDialog.Popup>
    </AlertDialogPortal>
  );
}

function AlertDialogContent({ className, children, ...props }: AlertDialog.Popup.Props) {
  return (
    <AlertDialogPortal>
      <AlertDialogBackdrop />
      <AlertDialog.Popup className={cn(styles.content, className)} data-slot="alert-dialog-popup" {...props}>
        {children}
      </AlertDialog.Popup>
    </AlertDialogPortal>
  );
}

function AlertDialogTitle({ className, ...props }: AlertDialog.Title.Props) {
  return <AlertDialog.Title className={cn(styles.title, className)} data-slot="alert-dialog-title" {...props} />;
}

function AlertDialogDescription({ className, ...props }: AlertDialog.Description.Props) {
  return (
    <AlertDialog.Description
      className={cn(styles.description, className)}
      data-slot="alert-dialog-description"
      {...props}
    />
  );
}

function AlertDialogClose({ ...props }: AlertDialog.Close.Props) {
  return <AlertDialog.Close data-slot="alert-dialog-close" nativeButton {...props} />;
}

const AlertDialogOverlay = AlertDialogBackdrop;

function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">) {
  return <div className={cn(styles.header, className)} data-slot="alert-dialog-header" {...props} />;
}

function AlertDialogFooter({ className, ...props }: React.ComponentProps<"div">) {
  return <div className={cn(styles.footer, className)} data-slot="alert-dialog-footer" {...props} />;
}

export {
  AlertDialogRoot as AlertDialog,
  AlertDialogClose,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogOverlay,
  AlertDialogPopup,
  AlertDialogPortal,
  AlertDialogRoot,
  AlertDialogTitle,
  AlertDialogTrigger,
};